📊📈🦋🦋🦋 iOS 图表框架 AAChartKit ---强大、精美、易用的开源 iOS 图表-阿里云开发者社区

您所喜爱的 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 区域填充图

Line Chart 多组数据折线图	Step Area Chart 直方折线填充图	Step Line Chart 直方折线图

###### 因项目功能较多,文件较大,请移步至 GitHub 下载. 亲爱的,如果您使用时,觉得满意,请赏一颗星星,您的鼓励将是我继续努力的一大动力 .

### GitHub传送门
### https://github.com/AAChartModel/AAChartKit

使用方法

准备工作

将项目demo中的文件夹AAChartKitLib拖入到所需项目中.
在你的项目的 .pch 全局宏定义文件中添加

#import "AAGlobalMacro.h"

正式开始

在你的视图控制器文件中添加

#import "AAChartKit.h"

创建视图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];

配置视图模型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]),
                 ])
    ;

绘制图形(创建 AAChartView 实例对象后,首次绘制图形调用此方法)

/*图表视图对象调用图表模型对象,绘制最终图形*/
[_aaChartView aa_drawChartWithChartModel:chartModel];

好了,至此,有关于绘制图形的任务,一切皆已经搞定!!! 你将得到你想要的任意图形!!!

更新图形内容

如果你需要更新图表内容,你应该阅读以下内容,根据你的实际需要,选择调用适合你的函数

仅仅刷新图形的数据(进行数据的动态更新操作时,建议使用此方法)

/*仅仅更新 AAChartModel 对象的 series 属性时,动态刷新图表*/
[_aaChartView aa_onlyRefreshTheChartDataWithChartModelSeries:aaChartModelSeriesArray];

刷新图形除数据属性 series 以外的其他属性(首次绘制图形完成之后,后续刷新图表的属性均建议调用此方法注意:仅仅刷新图形数据,则建议使用上面的aa_onlyRefreshTheChartDataWithChartModelSeries方法)

/*更新 AAChartModel 内容之后,刷新图表*/
[_aaChartView aa_refreshChartWithChartModel:aaChartModel];

AAChartModel一些重要属性经过配置之后的图形示例如下

line chart - 折线图

column chart - 柱形图

bar chart - 条形图

area spline range chart - 曲线区域范围图

AreaSplineRangeChart

special area chart one - 常规折线区域填充图

AreaChart

special area chart two - 带有负数的区域填充图

special area chart three - 堆积效果的区域填充图

polar chart - 极地图

radar chart - 雷达图

pie chart - 扇形图

bubble chart - 气泡图

scatter chart - 散点图

arearange chart - 区域范围图

step area chart - 直方折线填充图

mixed chart - 混合图形

特别说明

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

联系方式

温馨提示
如果有任何使用上的问题,随时欢迎您在 GitHub 上向我提 issue.
GitHub Issues : https://github.com/AAChartModel/AAChartKit/issues

如果您想参与到此项目的开源活动中来,也同样随时欢迎您联系我
GitHub : https://github.com/AAChartModel
StackOverflow : https://stackoverflow.com/users/7842508/codeforu
JianShu : http://www.jianshu.com/u/f1e6753d4254
SegmentFault : https://segmentfault.com/u/huanghunbieguan

附言

在 AAChartKit 封装库的初始设计中,为提升.js文件的加载速度,故将所依赖的.js文件放置在本地.然而由于本项目功能较多,故放置于本地的附加JavaScript文件库体积较大,整个AAJSFiles文件夹下所有的.js文件体积合计共有5.3M左右,若对工程文件体积大小较为敏感的使用者,可使用以下建议的替代方案

删除在本AAChartKit项目文件中,AAJSFiles文件夹下的5项.js文件.需要被删除的文件名称如下

AAHighchartsLibrary.js
AAHighchartsMore.js
AAHighcharts-3d.js
AAFunnel.js

将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用户可根据自己的实际项目的开发需要,酌情选择最终是否使用本替代方案.

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

📊📈🦋🦋🦋 iOS 图表框架 AAChartKit ---强大、精美、易用的开源 iOS 图表

您所喜爱的 AAChartKit 开源图表框架现在更有swift版本可供使用,详情请点击以下链接

传送门

前言

真机美图

使用方法

准备工作

正式开始

更新图形内容

AAChartModel一些重要属性经过配置之后的图形示例如下

line chart - 折线图

column chart - 柱形图

bar chart - 条形图

area spline range chart - 曲线区域范围图

special area chart one - 常规折线区域填充图

special area chart two - 带有负数的区域填充图

special area chart three - 堆积效果的区域填充图

polar chart - 极地图

radar chart - 雷达图

pie chart - 扇形图

bubble chart - 气泡图

scatter chart - 散点图

arearange chart - 区域范围图

step area chart - 直方折线填充图

mixed chart - 混合图形

更多图形效果

特别说明

当前已支持的图表类型有十种以上,说明如下

当前已支持的图表手势缩放类型共有三种,说明如下

当前已支持的图表渲染动画类型有三十种以上,说明如下

AAChartModel 属性配置列表

作者

许可证

联系方式

附言

热门文章

最新文章

相关课程

相关电子书

相关实验场景

您所喜爱的 AAChartKit 开源图表框架现在更有`swift`版本可供使用,详情请点击以下链接