?????iOS圖表框架AAChartKit—強大、精美、易用的開源iOS圖表

黃昏別館發表於2018-09-20
iOS框架

AAChartKit-s.png

您所喜愛的 AAChartKit 開源圖表框架現在更有swift版本可供使用,詳情請點選以下連結

傳送門

https://github.com/AAChartModel/AAChartKit-Swift

前言

AAChartKit 專案,是AAInfographics的 Objective-C 語言版本,是在流行的開源前端圖表框架Highcharts的基礎上,封裝的物件導向的,一組簡單易用,極其精美的圖表繪製控制元件.可能是這個星球上 UI 最精緻的第三方 iOS 開源圖表框架了(我以無神論者的名義向上帝起誓,我真的沒有在說鬼話)

## 功能特性

*

. 環境友好,相容性強. 適配 iOS 6 +, 支援ARC,支援 Objective-C語言,配置簡單.同時更有 Swift 版本AAInfographics可供使用.

. 功能強大,型別多樣. 支援柱狀圖 、條形圖 、折線圖 、曲線圖 、折線填充圖 、曲線填充圖、雷達圖、極地圖、扇形圖、氣泡圖、散點圖、區域範圍圖、柱形範圍圖、面積範圍圖、面積範圍均線圖、直方折線圖、直方折線填充圖、箱線圖、瀑布圖、熱力圖、桑基圖、金字塔圖、漏斗圖、等二十幾種型別的圖形,不可謂之不多.

?. 互動式圖形動畫. 有著清晰和充滿細節的使用者互動方式,與此同時,圖形渲染動畫效果細膩精緻,流暢優美.有三十多種以上渲染動畫效果可供選擇,使用者可自由設定渲染圖形時的動畫時間和動畫型別,關於圖形渲染動畫型別,具體參見 AAChartKit 動畫型別.

. 支援手勢縮放.支援圖表的手勢縮放和拖動閱覽,手勢縮放型別具體參見 AAChartKit 手勢縮放型別,預設禁用手勢縮放功能.

. 極簡主義. AAChartView + AAChartModel = Chart,在 AAChartKit 圖表框架當中,遵循這樣一個極簡主義公式:圖表檢視控制元件 + 圖表模型 = 你想要的圖表.同另一款強大而又精美的圖表庫AAInfographics完全一致.

. 鏈式程式設計語法. 支援類 Masonry 鏈式程式設計語法,一行程式碼即可配置完成 AAChartModel模型物件例項.

. 簡潔清晰,輕便易用. 最少僅僅需要 五行程式碼 即可完成整個圖表的繪製工作(使用鏈式程式設計語法配置 AAChartModel 例項物件時,無論你寫多少行程式碼,理論上只能算作是一行).

真機美圖

Column Chart 柱狀圖 Columnrange Chart 條形範圍圖 Area Chart 區域填充圖
ColumnChart.png BarChart.png AreaChart.png
Line Chart 多組資料折線圖 Step Area Chart 直方折線填充圖 Step Line Chart 直方折線圖
LineChart.png StepAreaChart.png StepLineChart.png

###### 因專案功能較多,檔案較大,請移步至 GitHub 下載. 親愛的,如果您使用時,覺得滿意,請賞一顆星星,您的鼓勵將是我繼續努力的一大動力 .

### GitHub傳送門
### https://github.com/AAChartModel/AAChartKit

使用方法

準備工作

  1. 將專案demo中的資料夾AAChartKitLib拖入到所需專案中.
  2. 在你的專案的 .pch 全域性巨集定義檔案中新增
#import "AAGlobalMacro.h"

正式開始

  1. 在你的檢視控制器檔案中新增
#import "AAChartKit.h"
  1. 建立檢視AAChartView 
CGFloat chartViewWidth  = self.view.frame.size.width;
CGFloat chartViewHeight = self.view.frame.size.height-250;
self.aaChartView = [[AAChartView alloc]initWithFrame:CGRectMake(0, 60, chartViewWidth, chartViewHeight)];
////設定圖表檢視的內容高度(預設 contentHeight 和 AAChartView 的高度相同)
//self.aaChartView.contentHeight = self.view.frame.size.height-250;
[self.view addSubview:self.aaChartView];
  1. 配置檢視模型AAChartModel
    AAChartModel *chartModel= AAObject(AAChartModel)
    .chartTypeSet(AAChartTypeColumn)//設定圖表的型別(這裡以設定的為柱狀圖為例)
    .titleSet(@"程式語言熱度")//設定圖表標題
    .subtitleSet(@"虛擬資料")//設定圖表副標題
    .categoriesSet(@[@"Java",@"Swift",@"Python",@"Ruby", @"PHP",@"Go",@"C",@"C#",@"C++"])//設定圖表橫軸的內容
    .yAxisTitleSet(@"攝氏度")//設定圖表 y 軸的單位
    .seriesSet(@[
                 AAObject(AASeriesElement)
                 .nameSet(@"2017")
                 .dataSet(@[@45,@56,@34,@43,@65,@56,@47,@28,@49]),
                 AAObject(AASeriesElement)
                 .nameSet(@"2018")
                 .dataSet(@[@11,@12,@13,@14,@15,@16,@17,@18,@19]),
                 AAObject(AASeriesElement)
                 .nameSet(@"2019")
                 .dataSet(@[@31,@22,@33,@54,@35,@36,@27,@38,@39]),
                 AAObject(AASeriesElement)
                 .nameSet(@"2020")
                 .dataSet(@[@21,@22,@53,@24,@65,@26,@37,@28,@49]),
                 ])
    ;
  1. 繪製圖形(建立 AAChartView 例項物件後,首次繪製圖形呼叫此方法)
/*圖表檢視物件呼叫圖表模型物件,繪製最終圖形*/
[_aaChartView aa_drawChartWithChartModel:chartModel];

好了,至此,有關於繪製圖形的任務,一切皆已經搞定!!! 你將得到你想要的任意圖形!!!

更新圖形內容

如果你需要更新圖表內容,你應該閱讀以下內容,根據你的實際需要,選擇呼叫適合你的函式

  • 僅僅重新整理圖形的資料(進行資料的動態更新操作時,建議使用此方法)
/*僅僅更新 AAChartModel 物件的 series 屬性時,動態重新整理圖表*/
[_aaChartView aa_onlyRefreshTheChartDataWithChartModelSeries:aaChartModelSeriesArray];
  • 重新整理圖形除資料屬性 series 以外的其他屬性(首次繪製圖形完成之後,後續重新整理圖表的屬性均建議呼叫此方法 注意:僅僅重新整理圖形資料,則建議使用上面的aa_onlyRefreshTheChartDataWithChartModelSeries方法)
/*更新 AAChartModel 內容之後,重新整理圖表*/
[_aaChartView aa_refreshChartWithChartModel:aaChartModel];

AAChartModel一些重要屬性經過配置之後的圖形示例如下

  • line chart – 折線圖

LineChart.png

  • column chart – 柱形圖

ColumnChart.png

  • bar chart – 條形圖

BarChart.png

  • area spline range chart – 曲線區域範圍圖

AreaSplineRangeChart

  • special area chart one – 常規折線區域填充圖

AreaChart

  • special area chart two – 帶有負數的區域填充圖

AreaChartOne.png

  • special area chart three – 堆積效果的區域填充圖

AreaChartTwo.png

  • polar chart – 極地圖

PolarChart.png

  • radar chart – 雷達圖

RadarChart.png

  • pie chart – 扇形圖

PieChart.png

  • bubble chart – 氣泡圖

BubbleChart.png

  • scatter chart – 散點圖

ScatterChart.png

  • arearange chart – 區域範圍圖

ArearangeChart.png

  • step area chart – 直方折線填充圖

StepAreaChart.png

  • mixed chart – 混合圖形

MixedChart.png

更多圖形效果

AAChartKit-Live9.gif

特別說明

AAChartKit 中扇形圖、氣泡圖都歸屬為特殊型別,所以想要繪製扇形圖、氣泡圖,圖表模型 AAChartModel 設定稍有不同,示例如下

  • 繪製扇形圖,你需要這樣配置模型 AAChartModel
AAChartModel *chartModel= AAObject(AAChartModel)
        .chartTypeSet(AAChartTypePie)
        .titleSet(@"程式語言熱度")
        .subtitleSet(@"虛擬資料")
        .dataLabelEnabledSet(true)//是否直接顯示扇形圖資料
        .yAxisTitleSet(@"攝氏度")
        .seriesSet(
                   @[AAObject(AASeriesElement)
                     .nameSet(@"語言熱度佔比")
                     .dataSet(@[
                                @[@"Java"  , @67],
                                @[@"Swift" , @44],
                                @[@"Python", @83],
                                @[@"OC"    , @11],
                                @[@"Ruby"  , @42],
                                @[@"PHP"   , @31],
                                @[@"Go"    , @63],
                                @[@"C"     , @24],
                                @[@"C#"    , @888],
                                @[@"C++"   , @66],
                                ]),
                     ]
                   
                   )
        ;
  • 繪製氣泡圖,你需要這樣配置模型 AAChartModel
AAChartModel *chartModel= AAObject(AAChartModel)
        .chartTypeSet(AAChartTypeBubble)
        .titleSet(@"程式語言熱度")
        .subtitleSet(@"虛擬資料")
        .yAxisTitleSet(@"攝氏度")
        .seriesSet(
                   @[
                     AAObject(AASeriesElement)
                     .nameSet(@"2017")
                     .dataSet(
                              @[
                                @[@97, @36, @79],
                                @[@94, @74, @60],
                                @[@68, @76, @58],
                                @[@64, @87, @56],
                                @[@68, @27, @73],
                                @[@74, @99, @42],
                                @[@7,  @93, @87],
                                @[@51, @69, @40],
                                @[@38, @23, @33],
                                @[@57, @86, @31]
                                ]),
                     
                     AAObject(AASeriesElement)
                     .nameSet(@"2018")
                     .dataSet(
                              @[
                                @[@25, @10, @87],
                                @[@2,  @75, @59],
                                @[@11, @54, @8 ],
                                @[@86, @55, @93],
                                @[@5,  @3,  @58],
                                @[@90, @63, @44],
                                @[@91, @33, @17],
                                @[@97, @3,  @56],
                                @[@15, @67, @48],
                                @[@54, @25, @81]
                                ]),
                     
                     AAObject(AASeriesElement)
                     .nameSet(@"2019")
                     .dataSet(
                              @[
                                @[@47, @47, @21],
                                @[@20, @12, @4 ],
                                @[@6,  @76, @91],
                                @[@38, @30, @60],
                                @[@57, @98, @64],
                                @[@61, @17, @80],
                                @[@83, @60, @13],
                                @[@67, @78, @75],
                                @[@64, @12, @10],
                                @[@30, @77, @82]
                                ]),
                     
                     ]
                   )
        ;

NOTE: 關於更多型別特殊圖表的 AAChartModel例項物件屬性配置,詳情請見 AAChartKit 工程 Demo 中的SpecialChartVC.m檔案內容,檢視檔案內容詳情請點選這裡,您也可以選擇下載 Demo 後,在 Xcode 中檢視 AAChartKit 的SpecialChartVC.m內容

當前已支援的圖表型別有十種以上,說明如下

typedef NSString *AAChartType;

AACHARTKIT_EXTERN AAChartType const AAChartTypeColumn;          //柱形圖
AACHARTKIT_EXTERN AAChartType const AAChartTypeBar;             //條形圖
AACHARTKIT_EXTERN AAChartType const AAChartTypeArea;            //折線區域填充圖
AACHARTKIT_EXTERN AAChartType const AAChartTypeAreaspline;      //曲線區域填充圖
AACHARTKIT_EXTERN AAChartType const AAChartTypeLine;            //折線圖
AACHARTKIT_EXTERN AAChartType const AAChartTypeSpline;          //曲線圖
AACHARTKIT_EXTERN AAChartType const AAChartTypeScatter;         //散點圖
AACHARTKIT_EXTERN AAChartType const AAChartTypePie;             //扇形圖
AACHARTKIT_EXTERN AAChartType const AAChartTypeBubble;          //氣泡圖
AACHARTKIT_EXTERN AAChartType const AAChartTypePyramid;         //金字塔圖
AACHARTKIT_EXTERN AAChartType const AAChartTypeFunnel;          //漏斗圖
AACHARTKIT_EXTERN AAChartType const AAChartTypeColumnrange;     //柱形範圍圖
AACHARTKIT_EXTERN AAChartType const AAChartTypeArearange;       //區域折線範圍圖
AACHARTKIT_EXTERN AAChartType const AAChartTypeAreasplinerange; //區域曲線範圍圖
AACHARTKIT_EXTERN AAChartType const AAChartTypeBoxplot;         //箱線圖
AACHARTKIT_EXTERN AAChartType const AAChartTypeWaterfall;       //瀑布圖
AACHARTKIT_EXTERN AAChartType const AAChartTypePolygon;         //多邊形圖

當前已支援的圖表手勢縮放型別共有三種,說明如下

typedef NSString *AAChartZoomType;

AACHARTKIT_EXTERN AAChartZoomType const AAChartZoomTypeNone; //禁用手勢縮放功能(預設禁用手勢縮放)
AACHARTKIT_EXTERN AAChartZoomType const AAChartZoomTypeX;    //支援圖表 X軸橫向縮放
AACHARTKIT_EXTERN AAChartZoomType const AAChartZoomTypeY;    //支援圖表 Y軸縱向縮放
AACHARTKIT_EXTERN AAChartZoomType const AAChartZoomTypeXY;   //支援圖表等比例縮放

NOTE:例如,設定了AAChartModel的縮放屬性zoomType為AAChartZoomTypeX,並且將圖表進行了手勢放大之後,這時候如果想要左右滑動圖表,可以使用 雙指點按 螢幕中的AAChartView檢視區域進行 左右拖動 即可.同時螢幕的右上角會自動出現一個標題為 “恢復縮放” 的按鈕,點選恢復縮放,圖表大小和位置將會迴歸到原初的樣式.

當前已支援的圖表渲染動畫型別有三十種以上,說明如下

typedef NS_ENUM(NSInteger,AAChartAnimation) {
    AAChartAnimationLinear = 0,
    AAChartAnimationEaseInQuad,
    AAChartAnimationEaseOutQuad,
    AAChartAnimationEaseInOutQuad,
    AAChartAnimationEaseInCubic,
    AAChartAnimationEaseOutCubic,
    AAChartAnimationEaseInOutCubic,
    AAChartAnimationEaseInQuart,
    AAChartAnimationEaseOutQuart,
    AAChartAnimationEaseInOutQuart,
    AAChartAnimationEaseInQuint,
    AAChartAnimationEaseOutQuint,
    AAChartAnimationEaseInOutQuint,
    AAChartAnimationEaseInSine,
    AAChartAnimationEaseOutSine,
    AAChartAnimationEaseInOutSine,
    AAChartAnimationEaseInExpo,
    AAChartAnimationEaseOutExpo,
    AAChartAnimationEaseInOutExpo,
    AAChartAnimationEaseInCirc,
    AAChartAnimationEaseOutCirc,
    AAChartAnimationEaseInOutCirc,
    AAChartAnimationEaseOutBounce,
    AAChartAnimationEaseInBack,
    AAChartAnimationEaseOutBack,
    AAChartAnimationEaseInOutBack,
    AAChartAnimationElastic,
    AAChartAnimationSwingFromTo,
    AAChartAnimationSwingFrom,
    AAChartAnimationSwingTo,
    AAChartAnimationBounce,
    AAChartAnimationBouncePast,
    AAChartAnimationEaseFromTo,
    AAChartAnimationEaseFrom,
    AAChartAnimationEaseTo,
};

下面是其中幾個圖表渲染動畫的圖形示意,大家可以隨意感受一下

Back Bounce Circ Cubic Elastic
Expo Quad Quart Quint Sine

AAChartModel 屬性配置列表

AAPropStatementAndFuncStatement(copy,   AAChartModel, NSString *, title);//標題內容
AAPropStatementAndFuncStatement(copy,   AAChartModel, NSString *, subtitle);//副標題內容
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray  *, series);//圖表的資料列內容

AAPropStatementAndFuncStatement(copy,   AAChartModel, AAChartSubtitleAlignType, subtitleAlign);//圖表副標題文字水平對齊方式。可選的值有 “left”，”center“和“right”。 預設是：center.
AAPropStatementAndFuncStatement(copy,   AAChartModel, AAChartType,              chartType);//圖表型別
AAPropStatementAndFuncStatement(copy,   AAChartModel, AAChartStackingType,      stacking);//堆積樣式
AAPropStatementAndFuncStatement(copy,   AAChartModel, AAChartSymbolType,        symbol);//折線曲線連線點的型別："circle", "square", "diamond", "triangle","triangle-down"，預設是"circle"
AAPropStatementAndFuncStatement(assign, AAChartModel, AAChartSymbolStyleType,   symbolStyle);
AAPropStatementAndFuncStatement(copy,   AAChartModel, AAChartZoomType,          zoomType);//縮放型別 AAChartZoomTypeX 表示可沿著 x 軸進行手勢縮放
AAPropStatementAndFuncStatement(assign, AAChartModel, AAChartAnimation,         animationType);//設定圖表的渲染動畫型別

AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, animationDuration);//設定圖表的渲染動畫時長
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       inverted);//x 軸是否垂直
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       xAxisReversed);// x 軸翻轉
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       yAxisReversed);//y 軸翻轉
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       gradientColorEnable);//是否要為漸變色
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       polar);//是否極化圖形(變為雷達圖)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       dataLabelEnabled);//是否顯示資料
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       xAxisLabelsEnabled);//x 軸是否顯示資料
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray  *, categories);//圖表橫座標每個點對應的名稱
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, xAxisGridLineWidth);//x 軸網格線的寬度
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       xAxisVisible);//x 軸是否可見(預設可見)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       yAxisVisible);//y 軸是否可見(預設可見)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       yAxisLabelsEnabled);//y 軸是否顯示資料
AAPropStatementAndFuncStatement(copy,   AAChartModel, NSString *, yAxisTitle);//y 軸標題
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, yAxisGridLineWidth);//y軸網格線的寬度
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray     <NSString *>*, colorsTheme);//圖表主題顏色陣列
AAPropStatementAndFuncStatement(copy,   AAChartModel, NSString *, backgroundColor);//圖表背景色(必須為十六進位制的顏色色值如紅色"#FF0000")

AAPropStatementAndFuncStatement(copy,   AAChartModel, NSString *, tooltipValueSuffix);//浮動提示框單位字尾
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       tooltipCrosshairs);//是否顯示準星線(預設顯示)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       connectNulls);//設定折線是否斷點重連(是否連線空值點)
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       legendEnabled);//是否顯示圖例 lengend(圖表底部可點按的圓點和文字)

AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       options3dEnable);//是否 3D 化圖形(僅對條形圖,柱狀圖有效)
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, options3dAlpha);
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, options3dBeta);
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, options3dDepth);//3D 圖形深度

AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, borderRadius);//柱狀圖長條圖頭部圓角半徑(可用於設定頭部的形狀,僅對條形圖,柱狀圖有效)
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, markerRadius);//折線連線點的半徑長度

AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL,       yAllowDecimals);//是否允許 y 軸顯示小數
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray  *, yPlotLines);//y 軸基線的配置
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, yMax);//y 軸最大值
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, yMin);//y 軸最小值（設定為0就不會有負數）
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray  *, yTickPositions);//自定義 y 軸座標（如：[@(0), @(25), @(50), @(75) , (100)]）

作者

An An

 "CODE IS FAR AWAY FROM BUG WITH THE ANIMAL PROTECTING"
 *          %%       %%
 *         ##       ##
 *       ┏-##┓　  ┏-##┓
 *    ┏_┛ ┻---━┛_┻━━┓
 *    ┃　　　        ┃　　　　 
 *    ┃　　 ━　      ┃　　　 
 *    ┃ @^　  @^    ┃　　 
 *    ┃　　　　　　  ┃
 *    ┃　　 ┻　　　 ┃
 *    ┃_　　　　　 _┃
 *     ┗━┓　　　┏━┛
 *    　　┃　　　┃神獸保佑
 *    　　┃　　　┃永無BUG！
 *    　　┃　　　┗━━━┓----|
 *    　　┃　　　　　　　  ┣┓}}}
 *    　　┃　　　　　　　  ┏┛
 *    　　┗┓&&&┓-┏&&&┓┏┛-|
 *    　　　┃┫┫　 ┃┫┫
 *    　　　┗┻┛　 ┗┻┛
 *
 *
 "CODE IS FAR AWAY FROM BUG WITH THE ANIMAL PROTECTING"

許可證

本專案使用 MIT許可證,詳情請點選MIT LICENSE

聯絡方式

附言

在 AAChartKit 封裝庫的初始設計中,為提升.js檔案的載入速度,故將所依賴的.js檔案放置在本地.然而由於本專案功能較多,故放置於本地的附加JavaScript檔案庫體積較大,整個AAJSFiles資料夾下所有的.js檔案體積合計共有5.3M左右,若對工程檔案體積大小較為敏感的使用者,可使用以下建議的替代方案

  1. 刪除在本AAChartKit專案檔案中,AAJSFiles資料夾下的5項.js檔案.需要被刪除的檔名稱如下
  • AAHighchartsLibrary.js
  • AAHighchartsMore.js
  • AAHighcharts-3d.js
  • AAFunnel.js
  1. 將AAChartView.html檔案中的以下內容
<script src="AAHighchartsLibrary.js">
</script>
<script src="AAHighchartsMore.js">
</script>
<script src="AAHighcharts-3d.js">
</script>
<script src="AAFunnel.js">
</script>

替換為

<script src="https://img.hcharts.cn/highcharts/highcharts.js">
</script>
<script src="https://img.hcharts.cn/highcharts/highcharts-more.js">
</script>

即可.

此方案是將原本載入放置在本地的.js依賴檔案改為了載入放置在網路上的.js檔案,減小了本地檔案大小,但有可能會有一定的網路延遲(0.5s以內),所以建議AAChartKit使用者可根據自己的實際專案的開發需要,酌情選擇最終是否使用本替代方案.


相關文章