因项目功能较多,文件较大,请移步至 GitHub 下载. 亲爱的,如果您使用时,觉得满意,请赏一颗星星✨,您的鼓励将是我继续努力的一大动力 .
GitHub传送门
https://github.com/AAChartMod…
前言
AAChartKit项目,是在流行的开源前端图表库Highcharts的基础上,封装的面向对象的,一组简单易用,极其精美的图表绘制控件.
- 适配
iOS 6, 支持ARC,支持OC语言,配置简单. - 功能强大,支持
柱状图条形图折线图填充图雷达图扇形图气泡图等多种图形 -
动画效果细腻精致,流畅优美. - 支持类 Masonry
链式编程语法 -
AAChartView +AAChartModel = Chart,在 AAChartKit 封装库当中,遵循这样一个极简主义公式:图表视图控件+图表模型=你想要的图表.
真机美图
| Column Chart 柱状图 | Columnrange Chart 条形范围图 | Area Chart 区域填充图 |
|---|---|---|
| Line Chart 多组数据折线图 | Step Area Chart 直方折线填充图 | Step Line Chart 直方折线图 |
|---|---|---|
使用方法
准备工作
- 将项目demo中的文件夹
AAChartKitLib拖入到所需项目中. - 在你的项目的
.pch全局宏定义文件中添加
#import "AAGlobalMacro.h"正式开始
- 在你的视图控制器文件中添加
#import "AAChartView.h"- 创建视图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];- 配置视图模型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]),
])
;- 绘制图形
[chartView aa_drawChartWithChartModel:chartModel];//图表视图对象调用图表模型对象,绘制最终图形- 刷新图形
[chartView aa_refreshChartWithChartModel:chartModel];//更新 AAChartModel 数据之后,刷新图表- 特别说明
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]
]),
]
)
;- 当前已支持的图表类型有十种以上,说明如下
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";//柱形范围图- 当前已支持的图表渲染动画类型有三十种以上,说明如下
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 – 折线图
– column chart – 柱形图
– bar chart – 条形图
– special area chart one – 区域填充图一
– special area chart two – 区域填充图二
– special area chart three – 区域填充图三
– area spline range chart – 区域曲线范围填充图
– radar chart – 雷达图
– polar chart – 极地图
– pie chart – 扇形图
– the oval style column chart – 头部为椭圆形的柱形图
– bubble chart – 气泡图
– mixed chart – 混合图形
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);//折线连接点的半径长度
更多图形效果
支持监听用户点击事件及单指滑动事件
可通过给 AAChartView 示例对象设置代理方法,来实现监听用户的点击事件和单指滑动事件
//设置 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共包含以下内容
@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 实例对象属性
/*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"))
;即可完成图表的浮动提示框的特殊定制化.得到的浮动提示框的视觉效果图如下👇
支持添加值域分割功能
- 添加颜色带🎀值域分割
- 添加颜色线🧶值域分割
作者
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左右,若对工程文件体积大小较为敏感的使用者,可使用以下建议的替代方案
- 删除在本
AAChartKit项目文件中,AAJSFiles文件夹下的5项.js文件.需要被删除的文件名称如下
- AAJQueryLibrary.js
- AAHighchartsLibrary.js
- AAHighchartsMore.js
- AAHighcharts-3d.js
- AAFunnel.js
- 将
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用户可根据自己的实际项目的开发需要,酌情选择最终是否使用本替代方案.
