【iOS】图表实现-AAChartKit
昨天把AAChartKit和Charts整体描述了一下,讲了一下两个三方库的优缺点。今天就注重讲一下AAChartKit的使用。
0.简介
AAChartKit 项目,是AAInfographics的 Objective-C
语言版本,是在流行的开源前端图表框架Highcharts的基础上,封装的面向对象的,一组简单易用,极其精美的图表绘制控件.
特性:
1. 环境友好,兼容性强. 适配 iOS 6 +, 支持ARC,支持 Objective-C语言,配置简单.同时更有 Swift 版本AAInfographics可供使用.
2. 功能强大,类型多样. 支持柱状图 、条形图 、折线图 、曲线图 、折线填充图 、曲线填充图、雷达图、极地图、扇形图、气泡图、散点图、区域范围图、柱形范围图、面积范围图、面积范围均线图、直方折线图、直方折线填充图、箱线图、瀑布图、热力图、桑基图、金字塔图、漏斗图、等二十几种类型的图形,不可谓之不多.
3. 交互式图形动画. 有着清晰和充满细节的用户交互方式,与此同时,图形渲染动画效果细腻精致,流畅优美.有三十多种以上渲染动画效果可供选择,用户可自由设置渲染图形时的动画时间和动画类型,关于图形渲染动画类型,具体参见 AAChartKit 动画类型.
4. 支持手势缩放.支持图表的手势缩放和拖动阅览,手势缩放类型具体参见 AAChartKit 手势缩放类型,默认禁用手势缩放功能.
5. 极简主义. AAChartView + AAChartModel = Chart,在 AAChartKit 图表框架当中,遵循这样一个极简主义公式:图表视图控件 + 图表模型 = 你想要的图表.同另一款强大而又精美的图表库AAInfographics完全一致.
6. 链式编程语法. 支持类 Masonry 链式编程语法,一行代码即可配置完成 AAChartModel模型对象实例.
7. 简洁清晰,轻便易用. 最少仅仅需要 五行代码 即可完成整个图表的绘制工作(使用链式编程语法配置 AAChartModel 实例对象时,无论你写多少行代码,理论上只能算作是一行).
上面文字摘自官方文档。
1.导入工程。
首先我们从github上下载示例工程。
由于AAChartKit暂不支持cocoapods导入(作者已经在开发中了,目测下几个版本就会加上)。所以我们只能手动导入。
导入方法:
(1)将下载示例工程中的AAChartKitLib拖入自己的项目;
(2)在自己的项目的.pch文件中加入 #import "AAGlobalMacro.h",这是AAChartKIT的宏定义。
完成这两步,就完成了AAChartKIT的导入工作。
2.使用方法
(1)在需要使用的界面中加入头文件#import "AAChartKit.h"
(2)添加图表
CGFloat chartViewWidth = self.view.frame.size.width; CGFloat chartViewHeight = self.view.frame.size.height-220; self.aaChartView = [[AAChartView alloc]init]; self.aaChartView.frame = CGRectMake(0, 60, chartViewWidth, chartViewHeight); self.aaChartView.delegate = self; self.aaChartView.scrollEnabled = NO;//禁用 AAChartView 滚动效果 // 设置aaChartVie 的内容高度(content height) // self.aaChartView.contentHeight = chartViewHeight*2; // 设置aaChartVie 的内容宽度(content width) // self.aaChartView.contentWidth = chartViewWidth*2; [self.view addSubview:self.aaChartView]; //设置 AAChartView 的背景色是否为透明 self.aaChartView.isClearBackgroundColor = YES;
(3)配置数据模型
self.aaChartModel= AAChartModel.new .chartTypeSet(chartType)//图表类型 .titleSet(@"")//图表主标题 .subtitleSet(@"")//图表副标题 .yAxisLineWidthSet(@0)//Y轴轴线线宽为0即是隐藏Y轴轴线 .colorsThemeSet(@[@"#fe117c",@"#ffc069",@"#06caf4",@"#7dffc0"])//设置主体颜色数组 .yAxisTitleSet(@"")//设置 Y 轴标题 .tooltipValueSuffixSet(@"℃")//设置浮动提示框单位后缀 .backgroundColorSet(@"#4b2b7f") .yAxisGridLineWidthSet(@0)//y轴横向分割线宽度为0(即是隐藏分割线) .seriesSet(@[ AASeriesElement.new .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]), AASeriesElement.new .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]), AASeriesElement.new .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]), AASeriesElement.new .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]), ] ); /*配置 Y 轴标注线,解开注释,即可查看添加标注线之后的图表效果(NOTE:必须设置 Y 轴可见)*/ // [self configureTheYAxisPlotLineForAAChartView]; [self.aaChartView aa_drawChartWithChartModel:_aaChartModel];
这就完成了基本模型操作。根据model中的不同设置可以显示不同的图表,还可以设置背景渐变、x轴y轴的自定义等功能。本文的代码是选自示例工程最简单的实现,其余复杂功能具体可以看示例工程中的代码。
3.更新内容
如果你需要更新图表内容,你应该阅读以下内容,根据你的实际需要,选择调用适合你的函数。
// 仅仅刷新图形的数据(进行数据的动态更新操作时,建议使用此方法) /*仅仅更新 AAChartModel 对象的 series 属性时,动态刷新图表*/ [_aaChartView aa_onlyRefreshTheChartDataWithChartModelSeries:aaChartModelSeriesArray];
/*更新 AAChartModel 内容之后,刷新图表*/ [_aaChartView aa_refreshChartWithChartModel:aaChartModel];
两者区别:
刷新图形除数据属性 series
以外的其他属性,首次绘制图形完成之后,后续刷新图表的属性均建议调用下面的方法
注意:仅仅刷新图形数据,则建议使用上面的aa_onlyRefreshTheChartDataWithChartModelSeries
方法。
4.特别说明:
AAChartKit 中扇形图、气泡图都归属为特殊类型,所以想要绘制扇形图、气泡图,图表模型 AAChartModel 设置稍有不同。详见官方demo。
5.总结:
看了这几步就基本上完成了AAChartKIT的使用。我最开始使用的也是这个三方库,虽然他获取的点赞数不如Charts,但是它导入简单,使用方便。但是由于我们的工程需要自定义显示点击后的MarkView和获取点击的图标的数据,这个三方库暂不支持我想要的功能。只能放弃了。
6.遇到的坑 摘自博客
我的实际需求是x轴要显示n条数据,不管x轴对应的y轴有没有数据都要显示.
AAChartKit的x轴个数是自适应数据, AAChartModel 用于设置 X轴文字内容的属性 categories是用来替换x轴属性的, 并不决定x轴有多少条, 决定x轴有多少条数据的属性是AASeriesElement的dataSet.