【iOS】图表实现-AAChartKit

孤者浪人 提交于 2021-02-03 11:04:44

昨天把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.

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!