iOS使用Charts框架绘制折线图

Posted 2023-03-16

参考技术A 公司的项目要使用到折线图，然后用的是第三方Charts框架，不得不说Charts很强大的一个第三方，几乎所有你想要的功能都可以做到，刚开始使用的时候很多功能没有找到，比如只标记最高点，滑动的时候数值变化等等，下面是简单的效果示意图。

现在我们开始一步一步来实现图中的效果吧。

在控制器中我们首先需要创建一个LineChartView的对象，在Charts框架中折线图用到的类是 LineChartView.h

在 LineChartView 中有两个属性 rightAxis 和 leftAxis 属于 ChartYAxis 类，是分别用来设置左边Y轴和右边Y轴的，可以根据自己的需求去设置。

在这里要注意的是，一般情况下y轴的数据是double类型的并且是没有特殊符号的，如果想要做到像图中的那样的百分数类型是要去设置的，然后我们发现 ChartYAxis 类中有一个属性 valueFormatter ,这个属性就是用来设置数据格式的，但比较麻烦的是这个属性必须遵循 <IChartAxisValueFormatter> 的协议，所以我们需要去自定义一个 SymbolsValueFormatter 类来完成

在.m的代理方法中

y轴设置完了，现在我们来设置x轴，在 LineChartView 中也有个属性 xAxis 使用来设置x轴的样式的，它属于 ChartXAxis 类，现在我们来创建它

到这里我们 _lineView 的x轴和y轴都设置好了，但是还少了一个选中数据滑动的时候值会变化的标签， LineChartView 中有个 marker 属性就是我们要找的， marker 属性遵循 <IChartMarker> 协议，是id类型，找了好久终于发现 ChartMarkerView 和 ChartMarkerImage 都有遵循 <IChartMarker> 协议，都是可以用的，可以根据自己的需求自己选择

折线图的数据 data 属性是属于 LineChartData 类，所以setData方法需要返回一个 LineChartData 的对象，但是在 LineChartData 的对象的初始化方法中 - (nonnull instancetype)initWithDataSets:(NSArray<id <IChartDataSet>> * _Nullable)dataSets 发现还需要一个装有 LineChartDataSet 的数组， LineChartDataSet 其实就是每一条折线，而绘制每一条折线又需要数据，所以我们先从数据开始一步一步创建。

上面创建的是模拟日期的格式，从02-1到03-21，x轴默认的数据格式也是double类型，所以我们需要像上面取设置y轴的数据格式那样来设置x轴的日期，我们新建 DateValueFormatter 类遵循 <IChartAxisValueFormatter> 协议，然后重写init方法，将x轴的数组传过去，在 DateValueFormatter 类中定义一个全局数组，在协议方法中去返回数据

x轴的数据设置完，我们需要来设置Y轴的数据了,因为是两条折线图，所以我们需要两个数组数据

数据完成后，我们就要来创建折线了，创建两个LineChartDataSet对象其中有一个对象是要返回最高点的值，所以要设置 valueFormatter 和前面的一样，重写了init方法

SetValueFormatter.h和前面的一样要继承协议,.m文件中定义了两个全局属性一个数组和一个记录最大值。

这样写好就会只有最高值显示，其他都显示 @""
前面两个 LineChartDataSet 对象都添加进了数组，接下来我们就可以创建 LineChartData 对象，然后返回就可以了

最后还有个 ChartView 的选中数据代理方法，主要用来显示选中折线数据的时候label值的变化

最后附上demo链接 ChartsDemo