AAChartKit--- 強大、精美、易用的開源iOS圖表庫

時間  2019-11-06
標籤 aachartkit 強大 精美 易用 開源 ios 圖表 欄目 iOS 简体版
原文   原文鏈接

AAChartKit-LOGO





  • 因項目功能較多,文件較大,請移步至 GitHub 下載. 親愛的,若是您使用時,以爲滿意,請賞一顆星星✨,您的鼓勵將是我繼續努力的一大動力 .

GitHub傳送門

https://github.com/AAChartMod...html

前言

AAChartKit項目,是在流行的開源前端圖表庫Highcharts的基礎上,封裝的面向對象的,一組簡單易用,極其精美的圖表繪製控件.
  1. 適配 iOS 6, 支持ARC,支持 OC語言,配置簡單.
  2. 功能強大,支持柱狀圖 條形圖 折線圖 填充圖 雷達圖 扇形圖 氣泡圖等多種圖形
  3. 動畫效果細膩精緻,流暢優美.
  4. 支持類 Masonry 鏈式編程語法
  5. AAChartView +AAChartModel = Chart,在 AAChartKit 封裝庫當中,遵循這樣一個極簡主義公式:圖表視圖控件+圖表模型=你想要的圖表.

真機美圖

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

使用方法

準備工做

  1. 將項目demo中的文件夾AAChartKitLib拖入到所需項目中.
  2. 在你的項目的 .pch 全局宏定義文件中添加
#import "AAGlobalMacro.h"

正式開始

  1. 在你的視圖控制器文件中添加
#import "AAChartView.h"
  1. 建立視圖AAChartView
AAChartView *chartView = [[AAChartView alloc]init];
self.view.backgroundColor = [UIColor whiteColor];
chartView.frame = CGRectMake(0, 60, self.view.frame.size.width, self.view.frame.size.height-220);
chartView.contentHeight =self.view.frame.size.height-220;//設置圖表視圖的內容高度(默認 contentHeight 和 AAChartView 的高度相同)
[self.view addSubview:chartView];
  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. 繪製圖形
[chartView aa_drawChartWithChartModel:chartModel];//圖表視圖對象調用圖表模型對象,繪製最終圖形
  1. 刷新圖形
[chartView aa_refreshChartWithChartModel:chartModel];//更新 AAChartModel 數據以後,刷新圖表
  1. 特別說明

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]
                                ]),
                     
                     ]
                   )
        ;
  1. 當前已支持的圖表類型有十種以上,說明以下
typedef NSString *AAChartType;
static AAChartType const AAChartTypeColumn      = @"column";     //柱形圖
static AAChartType const AAChartTypeBar         = @"bar";        //條形圖
static AAChartType const AAChartTypeArea        = @"area";       //折線區域填充圖
static AAChartType const AAChartTypeAreaspline  = @"areaspline"; //曲線區域填充圖
static AAChartType const AAChartTypeLine        = @"line";       //折線圖
static AAChartType const AAChartTypeSpline      = @"spline";     //曲線圖
static AAChartType const AAChartTypeScatter     = @"scatter";    //散點圖
static AAChartType const AAChartTypePie         = @"pie";        //扇形圖
static AAChartType const AAChartTypeBubble      = @"bubble";     //氣泡圖
static AAChartType const AAChartTypePyramid     = @"pyramid";    //金字塔圖
static AAChartType const AAChartTypeFunnel      = @"funnel";     //漏斗圖
static AAChartType const AAChartTypeColumnrange = @"columnrange";//柱形範圍圖
  1. 當前已支持的圖表渲染動畫類型有三十種以上,說明以下
typedef NS_ENUM(NSInteger,AAChartAnimationType){
    AAChartAnimationTypeLinear =0,
    AAChartAnimationTypeSwing,
    AAChartAnimationTypeEaseInQuad,
    AAChartAnimationTypeEaseOutQuad,
    AAChartAnimationTypeEaseInOutQuad,
    AAChartAnimationTypeEaseInCubic,
    AAChartAnimationTypeEaseOutCubic,
    AAChartAnimationTypeEaseInOutCubic,
    AAChartAnimationTypeEaseInQuart,
    AAChartAnimationTypeEaseOutQuart,
    AAChartAnimationTypeEaseInOutQuart,
    AAChartAnimationTypeEaseInQuint,
    AAChartAnimationTypeEaseOutQuint,
    AAChartAnimationTypeEaseInOutQuint,
    AAChartAnimationTypeEaseInExpo,
    AAChartAnimationTypeEaseOutExpo,
    AAChartAnimationTypeEaseInOutExpo,
    AAChartAnimationTypeEaseInSine,
    AAChartAnimationTypeEaseOutSine,
    AAChartAnimationTypeEaseInOutSine,
    AAChartAnimationTypeEaseInCirc,
    AAChartAnimationTypeEaseOutCirc,
    AAChartAnimationTypeEaseInOutCirc,
    AAChartAnimationTypeEaseInElastic,
    AAChartAnimationTypeEaseOutElastic,
    AAChartAnimationTypeEaseInOutElastic,
    AAChartAnimationTypeEaseInBack,
    AAChartAnimationTypeEaseOutBack,
    AAChartAnimationTypeEaseInOutBack,
    AAChartAnimationTypeEaseInBounce,
    AAChartAnimationTypeEaseOutBounce,
    AAChartAnimationTypeEaseInOutBounce,
};

AAChartModel一些重要屬性通過配置以後的圖形示例以下

- line chart - 折線圖

IMG_1867.JPG

- column chart - 柱形圖

IMG_1483.JPG

- bar chart - 條形圖

IMG_1880.JPG

- special area chart one - 區域填充圖一

IMG_1482.JPG

- special area chart two - 區域填充圖二

IMG_1874.JPG

- special area chart three - 區域填充圖三

IMG_1863.JPG

- area spline range chart - 區域曲線範圍填充圖

![屏幕快照 2018-09-14 下午11.55.59.png

- radar chart - 雷達圖

IMG_1877.JPG

- polar chart - 極地圖

IMG_1879.JPG

- pie chart - 扇形圖

IMG_1878.JPG

- the oval style column chart - 頭部爲橢圓形的柱形圖

IMG_1866.JPG

- bubble chart - 氣泡圖

IMG_1875.JPG

- mixed chart - 混合圖形

屏幕快照 2017-05-11 下午11.21.03.png

AAChartModel 屬性配置列表

AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, title);//標題內容
AAPropStatementAndFuncStatement(copy, AAChartModel, NSString *, subtitle);//副標題內容
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(copy, AAChartModel, AAChartZoomType, zoomType);//縮放類型 AAChartZoomTypeX表示可沿着 x 軸進行手勢縮放
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, pointHollow);//折線曲線的鏈接點是否爲空心的
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, inverted);//x 軸是否垂直
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, xAxisReversed);// x 軸翻轉
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, yAxisReversed);//y 軸翻轉
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, crosshairs);//是否顯示準星線(默認顯示)
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, yAxisLabelsEnabled);//y軸是否顯示數據
AAPropStatementAndFuncStatement(copy,   AAChartModel, NSString *, yAxisTitle);//y軸標題
AAPropStatementAndFuncStatement(strong, AAChartModel, NSNumber *, yAxisGridLineWidth);//y軸網格線的寬度
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray *, colorsTheme);//圖表主題顏色數組
AAPropStatementAndFuncStatement(strong, AAChartModel, NSArray *, series);
AAPropStatementAndFuncStatement(assign, AAChartModel, BOOL, legendEnabled);//是否顯示圖例
AAPropStatementAndFuncStatement(copy,   AAChartModel ,AAChartLegendLayoutType, legendLayout);//圖例數據項的佈局。佈局類型： "horizontal" 或 "vertical" 即水平佈局和垂直佈局 默認是：horizontal.
AAPropStatementAndFuncStatement(copy,   AAChartModel ,AAChartLegendAlignType, legendAlign);//設定圖例在圖表區中的水平對齊方式，合法值有left，center 和 right。
AAPropStatementAndFuncStatement(copy,   AAChartModel ,AAChartLegendVerticalAlignType, legendVerticalAlign);//設定圖例在圖表區中的垂直對齊方式，合法值有 top，middle 和 bottom。垂直位置能夠經過 y 選項作進一步設定。
AAPropStatementAndFuncStatement(copy,   AAChartModel, NSString *, backgroundColor);//圖表背景色
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);//折線鏈接點的半徑長度

更多圖形效果

AAChartKitShow.gif

支持監聽用戶點擊事件及單指滑動事件

可經過給 AAChartView 示例對象設置代理方法,來實現監聽用戶的點擊事件和單指滑動事件java

//設置 AAChartView 事件代理
 self.aaChartView.delegate = self;

 //實現對 AAChartView 事件代理的監聽
 #pragma mark -- AAChartView delegate
 - (void)AAChartView:(AAChartView *)chartView moveOverEventWithMessage:(AAMoveOverEventMessageModel *)message {
 NSLog(@"🚀selected point series element name: %@",message.name);
 }

在監聽用戶交互事件時,獲取的事件信息AAMoveOverEventMessageModel共包含如下內容jquery

@interface AAMoveOverEventMessageModel : NSObject

@property (nonatomic, copy)   NSString *name; 
@property (nonatomic, strong) NSNumber *x; 
@property (nonatomic, strong) NSNumber *y;
@property (nonatomic, copy)   NSString *category;
@property (nonatomic, strong) NSDictionary *offset;
@property (nonatomic, assign) NSUInteger index;

@end

支持經過JavaScript 函數來自定義 AATooltip視圖顯示效果

有時系統默認的 tooltip 浮動提示框的顯示效果沒法知足使用者的特殊自定義要求,此時能夠經過添加 AATooltip 的 headerFormat 和 pointFormat字符串屬性來自定義浮動提示框的顯示內容,如仍舊不能知足需求,更能夠經過 AATooltip 的 formatter 函數來實現視圖的特殊定製化
例如,以下配置 AATooltip 實例對象屬性ios

/*Custom Tooltip Style --- 自定義圖表浮動提示框樣式及內容*/
    AATooltip *tooltip = aaOptions.tooltip;
    tooltip
    .useHTMLSet(true)
    .formatterSet(@AAJSFunc(function () {
        return ' 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔 <br/> '
        + ' Support JavaScript Function Just Right Now !!! <br/> '
        + ' The Gold Price For <b>2020 '
        +  this.x
        + ' </b> Is <b> '
        +  this.y
        + ' </b> Dollars ';
    }))
    .valueDecimalsSet(@2)//設置取值精確到小數點後幾位
    .backgroundColorSet(@"#000000")
    .borderColorSet(@"#000000")
    .styleSet((id)AAStyle.new
              .colorSet(@"#FFD700")
              .fontSizeSet(@"12px"))
    ;

便可完成圖表的浮動提示框的特殊定製化.獲得的浮動提示框的視覺效果圖以下👇
Custom Tooltip Stylegit

支持添加值域分割功能

  • 添加顏色帶🎀值域分割

plotBandsChart

  • 添加顏色線🧶值域分割

plotLinesChart

做者

An Angithub

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

許可證

本項目使用 MIT許可證,詳情請點擊MIT LICENSEobjective-c

附言

在 AAChartKit 封裝庫的初始設計中,爲提高.js文件的加載速度,故將所依賴的.js文件放置在本地.然而因爲本項目功能較多,故放置於本地的附加JavaScript文件庫體積較大,整個AAJSFiles文件夾下全部的.js文件體積合計共有5.3M左右,若對工程文件體積大小較爲敏感的使用者,可以使用如下建議的替代方案編程

  1. 刪除在本AAChartKit項目文件中,AAJSFiles文件夾下的5項.js文件.須要被刪除的文件名稱以下
  • AAJQueryLibrary.js
  • AAHighchartsLibrary.js
  • AAHighchartsMore.js
  • AAHighcharts-3d.js
  • AAFunnel.js
  1. 將AAChartView.html文件中的如下內容
<script src="AAJQueryLibrary.js">
</script>
<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/jquery/jquery-1.8.3.min.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用戶可根據本身的實際項目的開發須要,酌情選擇最終是否使用本替代方案.

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程