iOS使用Charts框架绘制折线图
发布网友
发布时间:2022-11-14 07:01
我来回答
共1个回答
热心网友
时间:2024-10-23 21:32
公司的项目要使用到折线图,然后用的是第三方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