English Document 🇬🇧 | 简体中文文档 🇨🇳 | 繁體中文文檔 🇭🇰

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

传送门

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

前言

AAChartKit 项目,是AAInfographics的 Objective-C 语言版本,是在流行的开源前端图表库Highcharts的基础上,封装的面向对象的,一组简单易用,极其精美的图表绘制控件.可能是这个星球上 UI 最精致的第三方 iOS 开源图表库了(✟我以无神论者的名义向上帝起誓 🖐,我真的没有在说鬼话✟)

功能特性

真机美图

Column Chart 柱状图	Column Range Chart 条形范围图	Area Chart 区域填充图

Line Chart 折线图	Step Area Chart 直方折线填充图	Step Line Chart 直方折线图

Spline Chart 曲线图	Areaspline Chart 曲线填充图	Stacked Polar Chart 堆积填充图

使用方法

准备工作

将项目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;
_aaChartView = [[AAChartView alloc]init];
_aaChartView.frame = CGRectMake(0, 60, chartViewWidth, chartViewHeight);
////禁用 AAChartView 滚动效果(默认不禁用)
//self.aaChartView.scrollEnabled = NO;
////设置图表视图的内容高度(默认 contentHeight 和 AAChartView 的高度相同)
//_aaChartView.contentHeight = chartViewHeight;
[self.view addSubview:_aaChartView];

配置视图模型AAChartModel

AAChartModel *aaChartModel= AAObject(AAChartModel)
.chartTypeSet(AAChartTypeColumn)//设置图表的类型(这里以设置的为柱状图为例)
.titleSet(@"编程语言热度")//设置图表标题
.subtitleSet(@"虚拟数据")//设置图表副标题
.categoriesSet(@[@"Java",@"Swift",@"Python",@"Ruby", @"PHP",@"Go",@"C",@"C#",@"C++"])//图表横轴的内容
.yAxisTitleSet(@"摄氏度")//设置图表 y 轴的单位
.seriesSet(@[
        AAObject(AASeriesElement)
        .nameSet(@"2017")
        .dataSet(@[@7.0, @6.9, @9.5, @14.5, @18.2, @21.5, @25.2, @26.5, @23.3, @18.3, @13.9, @9.6]),
        AAObject(AASeriesElement)
        .nameSet(@"2018")
        .dataSet(@[@0.2, @0.8, @5.7, @11.3, @17.0, @22.0, @24.8, @24.1, @20.1, @14.1, @8.6, @2.5]),
        AAObject(AASeriesElement)
        .nameSet(@"2019")
        .dataSet(@[@0.9, @0.6, @3.5, @8.4, @13.5, @17.0, @18.6, @17.9, @14.3, @9.0, @3.9, @1.0]),
        AAObject(AASeriesElement)
        .nameSet(@"2020")
        .dataSet(@[@3.9, @4.2, @5.7, @8.5, @11.9, @15.2, @17.0, @16.6, @14.2, @10.3, @6.6, @4.8]),
                 ])
;

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

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

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

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

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

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

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

line chart - 折线图

column chart - 柱状图

bar chart - 条形图

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

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

special area chart three - 堆积状态的折线区域填充图

radar chart - 多组数据的雷达图

polar chart - 极地图

pie chart - 环形图(中间为空的扇形图)

bubble chart - 气泡图

scatter chart - 散点图

arearange chart - 区域范围填充图

step area chart - 直方区域填充图

mixed chart - 混合图形(折线图&柱形范围图)

更多图形效果

注意:如下的这幅DEMO演示图为大小6M左右的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;

UIKIT_EXTERN AAChartType const AAChartTypeColumn;      //柱形图
UIKIT_EXTERN AAChartType const AAChartTypeBar;         //条形图
UIKIT_EXTERN AAChartType const AAChartTypeArea;        //折线区域填充图
UIKIT_EXTERN AAChartType const AAChartTypeAreaspline;  //曲线区域填充图
UIKIT_EXTERN AAChartType const AAChartTypeLine;        //折线图
UIKIT_EXTERN AAChartType const AAChartTypeSpline;      //曲线图
UIKIT_EXTERN AAChartType const AAChartTypeScatter;     //散点图
UIKIT_EXTERN AAChartType const AAChartTypePie;         //扇形图
UIKIT_EXTERN AAChartType const AAChartTypeBubble;      //气泡图
UIKIT_EXTERN AAChartType const AAChartTypePyramid;     //金字塔图
UIKIT_EXTERN AAChartType const AAChartTypeFunnel;      //漏斗图
UIKIT_EXTERN AAChartType const AAChartTypeColumnrange; //柱形范围图
UIKIT_EXTERN AAChartType const AAChartTypeArearange;   //区域范围图

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

typedef NSString *AAChartZoomType;

UIKIT_EXTERN AAChartZoomType const AAChartZoomTypeNone; //禁用手势缩放功能(默认禁用手势缩放)
UIKIT_EXTERN AAChartZoomType const AAChartZoomTypeX;    //支持图表 X轴横向缩放
UIKIT_EXTERN AAChartZoomType const AAChartZoomTypeY;    //支持图表 Y轴纵向缩放
UIKIT_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,
};

以下是AAChartKit其中十种图表渲染动画类型

Back	Bounce	Circ	Cubic	Elastic

Expo	Quad	Quart	Quint	Sine

`AAChartModel` 属性配置列表

AAPropSetFuncImplementation(AAChartModel, NSString *, title);//标题内容
AAPropSetFuncImplementation(AAChartModel, NSNumber *, titleFontSize);//Title label font size
AAPropSetFuncImplementation(AAChartModel, NSString *, titleFontWeight);//Title label font weight
AAPropSetFuncImplementation(AAChartModel, NSString *, titleFontColor);//Title label font color

AAPropSetFuncImplementation(AAChartModel, NSString *, subtitle);//副标题内容
AAPropSetFuncImplementation(AAChartModel, NSNumber *, subtitleFontSize);//Subtitle label font size
AAPropSetFuncImplementation(AAChartModel, NSString *, subtitleFontWeight);//Subtitle label font weight
AAPropSetFuncImplementation(AAChartModel, NSString *, subtitleFontColor);//Subtitle flabel font color

AAPropSetFuncImplementation(AAChartModel, NSArray  *, series);//图表的数据列内容
AAPropSetFuncImplementation(AAChartModel, NSArray  *, keys);//Key support

AAPropSetFuncImplementation(AAChartModel, AAChartSubtitleAlignType, subtitleAlign);//图表副标题文本水平对齐方式。可选的值有 “left”，”center“和“right”。 默认是：center.
AAPropSetFuncImplementation(AAChartModel, AAChartType,              chartType);//图表类型
AAPropSetFuncImplementation(AAChartModel, AAChartStackingType,      stacking);//堆积样式
AAPropSetFuncImplementation(AAChartModel, AAChartSymbolType,        symbol);//折线曲线连接点的类型："circle", "square", "diamond", "triangle","triangle-down"，默认是"circle"
AAPropSetFuncImplementation(AAChartModel, AAChartSymbolStyleType,   symbolStyle);
AAPropSetFuncImplementation(AAChartModel, AAChartZoomType,          zoomType);//缩放类型 AAChartZoomTypeX 表示可沿着 x 轴进行手势缩放
AAPropSetFuncImplementation(AAChartModel, AAChartAnimation,         animationType);//设置图表的渲染动画类型

AAPropSetFuncImplementation(AAChartModel, NSNumber *, animationDuration);//设置图表的渲染动画时长(动画单位为毫秒)
AAPropSetFuncImplementation(AAChartModel, BOOL,       inverted);//x 轴是否垂直
AAPropSetFuncImplementation(AAChartModel, BOOL,       xAxisReversed);// x 轴翻转
AAPropSetFuncImplementation(AAChartModel, BOOL,       yAxisReversed);//y 轴翻转
AAPropSetFuncImplementation(AAChartModel, BOOL,       gradientColorEnabled);//是否要为渐变色
AAPropSetFuncImplementation(AAChartModel, BOOL,       polar);//是否极化图形(变为雷达图)
AAPropSetFuncImplementation(AAChartModel, BOOL,       dataLabelEnabled);//是否显示数据
AAPropSetFuncImplementation(AAChartModel, NSString *, dataLabelFontColor);//Datalabel font color
AAPropSetFuncImplementation(AAChartModel, NSNumber *, dataLabelFontSize);//Datalabel font size
AAPropSetFuncImplementation(AAChartModel, NSString *, dataLabelFontWeight);//Datalabel font weight

AAPropSetFuncImplementation(AAChartModel, BOOL,       xAxisLabelsEnabled);//x 轴是否显示数据
AAPropSetFuncImplementation(AAChartModel, NSNumber *, xAxisLabelsFontSize);//x-axis labels font size
AAPropSetFuncImplementation(AAChartModel, NSString *, xAxisLabelsFontWeight);//x-axis fonto weight
AAPropSetFuncImplementation(AAChartModel, NSString *, xAxisLabelsFontColor);//x-axis fonto color
AAPropSetFuncImplementation(AAChartModel, NSArray  *, categories);//图表横坐标每个点对应的名称
AAPropSetFuncImplementation(AAChartModel, NSNumber *, xAxisGridLineWidth);//x 轴网格线的宽度
AAPropSetFuncImplementation(AAChartModel, NSNumber *, xAxisTickInterval);//x轴刻度点间隔数(设置每隔几个点显示一个 X轴的内容)

AAPropSetFuncImplementation(AAChartModel, BOOL,       xAxisVisible);//x 轴是否可见(默认可见)
AAPropSetFuncImplementation(AAChartModel, BOOL,       yAxisVisible);//y 轴是否可见(默认可见)
AAPropSetFuncImplementation(AAChartModel, BOOL,       yAxisLabelsEnabled);//y 轴是否显示数据
AAPropSetFuncImplementation(AAChartModel, NSString *, yAxisTitle);//y 轴标题
AAPropSetFuncImplementation(AAChartModel, NSNumber *, yAxisLabelsFontSize);//y-axis labels font size
AAPropSetFuncImplementation(AAChartModel, NSString *, yAxisLabelsFontWeight);//y-axis fonto weight
AAPropSetFuncImplementation(AAChartModel, NSString *, yAxisLabelsFontColor);//y-axis fonto color
AAPropSetFuncImplementation(AAChartModel, NSNumber *, yAxisGridLineWidth);//y轴网格线的宽度
AAPropSetFuncImplementation(AAChartModel, NSArray     <NSString *>*, colorsTheme);//图表主题颜色数组
AAPropSetFuncImplementation(AAChartModel, NSString *, backgroundColor);//图表背景色(必须为十六进制的颜色色值如红色"#FF0000")

AAPropSetFuncImplementation(AAChartModel, BOOL,       tooltipEnabled);//是否显示浮动提示框(默认显示)
AAPropSetFuncImplementation(AAChartModel, NSString *, tooltipValueSuffix);//浮动提示框单位后缀
AAPropSetFuncImplementation(AAChartModel, NSString *, tooltipValueString);//Tooltip string
AAPropSetFuncImplementation(AAChartModel, BOOL,       tooltipCrosshairs);//是否显示准星线(默认显示)
AAPropSetFuncImplementation(AAChartModel, BOOL,       connectNulls);//设置折线是否断点重连(是否连接空值点)
AAPropSetFuncImplementation(AAChartModel, BOOL,       legendEnabled);//是否显示图例 lengend(图表底部可点按的圆点和文字)

AAPropSetFuncImplementation(AAChartModel, BOOL,       options3dEnabled);//是否 3D 化图形(仅对条形图,柱状图有效)
AAPropSetFuncImplementation(AAChartModel, NSNumber *, options3dAlpha);
AAPropSetFuncImplementation(AAChartModel, NSNumber *, options3dBeta);
AAPropSetFuncImplementation(AAChartModel, NSNumber *, options3dDepth);//3D 图形深度

AAPropSetFuncImplementation(AAChartModel, NSNumber *, borderRadius);//柱状图长条图头部圆角半径(可用于设置头部的形状,仅对条形图,柱状图有效)
AAPropSetFuncImplementation(AAChartModel, NSNumber *, markerRadius);//折线连接点的半径长度

AAPropSetFuncImplementation(AAChartModel, BOOL,       yAxisAllowDecimals);//是否允许 y 轴显示小数
AAPropSetFuncImplementation(AAChartModel, NSArray  *, yAxisPlotLines);//y 轴基线的配置
AAPropSetFuncImplementation(AAChartModel, NSNumber *, yAxisMax);//y 轴最大值
AAPropSetFuncImplementation(AAChartModel, NSNumber *, yAxisMin);//y 轴最小值（设置为0就不会有负数）
AAPropSetFuncImplementation(AAChartModel, NSArray  *, yAxisTickPositions);//自定义 y 轴坐标（如：[@(0), @(25), @(50), @(75) , (100)]）
AAPropSetFuncImplementation(AAChartModel, NSString *, zoomResetButtonText); //String to display in 'zoom reset button"

作者

An An

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

源代码 ⛓

语言版本	项目名称	源代码链接
Swift	AAInfographics	https://github.com/AAChartModel/AAChartKit-Swift
Objective C	AAChartKit	https://github.com/AAChartModel/AAChartKit

许可证

本项目 AAChartKit 使用 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文件体积合计共有250KB左右(当然,在项目打包为压缩后的.ipa工程安装包文件时,是远小于这个体积的),若对工程文件体积大小较为敏感的使用者,可使用以下建议的替代方案

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

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

将AAChartView.html文件中的以下内容

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

待办清单

支持图形加载完成后用户添加代理事件
支持图形动态刷新全局内容
支持图形动态刷新纯数据(series)内容
支持图形实时刷新纯数据并动态滚动
支持色彩图层渐变效果
支持3D图形效果,仅对柱状图、条形图、扇形图、散点图、气泡图等部分图形有效
支持代码覆盖率测试
支持使用CocoaPods 导入
支持使用Carthage 导入
支持横屏(全屏)效果
支持自由设置图形渲染动画
支持已渲染图形生成图片文件
支持生成图片文件保存至系统相册
支持用户自由配置AAOptions模型对象属性
支持图形堆叠
支持图形坐标轴反转
支持渲染散点图
支持渲染柱形范围图
支持渲染面积范围图
支持渲染面积范围均线图
支持渲染极地图
支持渲染折线直方图
支持渲染折线直方填充图
支持渲染南丁格尔 🌹玫瑰图
支持渲染矩形树状层级关系图
支持渲染活动刻度仪表图
支持为图形添加点击事件回调