AAChartKit 一款極其精美的iOS開源圖表庫

時間  2019-11-13
標籤 aachartkit 一款 極其 精美 ios 開源 圖表 欄目 iOS 简体版
原文   原文鏈接

查看網頁版說明書(附有交互式圖表)請點擊連接

http://htmlpreview.github.io/?https://github.com/AAChartModel/AAChartKit/blob/master/AAChartKit/ChartsDemo/AAChartKitDocumentLive.htmlhtml

前言

AAChartKit項目,是在流行的開源前端圖表庫Highcharts的基礎上,封裝的面向對象的,一組簡單易用,極其精美的圖表繪製控件.
  1. 適配 iOS 6, 支持ARC,支持 OC語言,配置簡單.
  2. 功能強大,支持柱狀圖 條形圖 折線圖 填充圖 雷達圖 扇形圖 氣泡圖等多種圖形
  3. 動畫效果細膩精緻,流暢優美.
  4. 支持類 Masonry 鏈式編程語法
  5. AAChartView +AAChartModel = Chart,在 AAChartKit 封裝庫當中,遵循這樣一個極簡主義公式:圖表視圖控件+圖表模型=你想要的圖表.
  • ######因項目功能較多,文件較大,請移步至 GitHub 下載. 親愛的,若是您使用時,以爲滿意,請賞一顆星星✨,您的鼓勵將是我繼續努力的一大動力 .

GitHub傳送門

https://github.com/AAChartModel/AAChartKit前端

使用方法

準備工做

  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 設置稍有不一樣,示例以下java

  • 繪製扇形圖,你須要這樣配置模型 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 - 區域填充圖二jquery

IMG_1874.JPG

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

IMG_1863.JPG

  • 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

做者

An Anios

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

許可證

本項目使用 MIT許可證,詳情請點擊MIT LICENSEgit

附言

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

  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>

替換爲objective-c

<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教程