LineChart:折线图 详解 （PNChart三方库）

Posted 2023-03-16

参考技术A

由于最近公司要求画折线图，搞得头都大了~

不过研究一段时间后发现PNChart还挺好用的，作者人也不错哦！😁

虽然自己不知道这是不是 真的作者，但还是蛮开心的😊😊

而且网络上的讲解资料只是描绘了大概的谱，更详细的界面搭建和绘制则需要进一步研究、了解！！
所以就着自己的经验，分享一下PNChart里面LineChart的细节使用！


导入头文件

(屏幕尺寸) 宏定义：

定义全局变量：

在- (void)viewDidLoad 里面：

创建绘图对象 及 相应配置：

折线图：

效果：

超出Y轴的值。 ( 有效显示范围 )不会显示出来，但是会绘制到哪里。

我自己觉得的缺点：
1.X轴最后一位标签和箭头重合，不美观！（坐标轴及有效显示范围的大小 会根据数据的内容进行变化）
2.图形的点与X轴位置不对应。
当然通过以下属性 可以设置好点的对应关系，但是标签值 又不对应了。

这几个属性慎用:（反正 我没 搞懂怎么用。。。😂😂）。还望明白的同志交流、提示一下。

有效范围：绘制的折线图的显示范围
x轴起点 通过第一个点的值( [first_X_str floatValue] ) 求出
y轴起点 通过自己创建好的Chart视图的⭐️比例关系 求出

效果：X、Y轴的起点确定，即可设置自己的 坐标轴 了

协议方法的使用：

效果：点击响应事件 及 其绘制的动画效果(点多(数据量大)效果更明显)

有个点(290) ， 点不到~😂😂😂

比例位置关系
由于chart图像绘制好，放入的另一个视图及自身的比例是固定。所以计算出有效显示范围，就可以确定 X轴起始点 和 显示高度(及 Y轴结束点: 最顶端 )！！
那么我们就可以自己绘制Y轴 和 X轴的视图放置上去。

自己绘制X轴 与 Y轴的原因：
1.chart绘制好以后，若其需要其显示的长度大于和屏幕的宽度，就需要一个用于显示Y轴且固定好的视图；

例子：
属性：

绘制：

效果：Y轴不固定

所以确定 起点的X轴坐标 及 有效显示范围的上面那条边对应 顶点的Y值(Y轴显示标签最大值) 就可以了。

2.X轴里面的标签值的字符串长度过大，并不会自适应宽度，所有最好自定制一个X轴的视图。

例子：

效果：显示的大小不统一且出现了换行。

位置关系的总结
由于与父视图左侧、顶部 重合。放入的 绘图数据 变化时，其显示的Y轴最大标签值 的顶部 到父视图顶部距离固定。计算出其距离可确定有效范围(黄色区域)的起点，即可知道Y轴的位置了。

有效范围的X轴起点坐标：从第一个点的坐标获取；
有效范围的Y轴起点坐标：根据 放置自己的Chart高度的比例，就可计算出其值。(Chart高度固定(或 比例确定)，有效范围的Y轴标签的顶点坐标 即固定)
⭐️由于ScrollView和Chart的视图位置、大小关系固定，即可在ScrollView或者在Chart里面添加自己绘制的X轴坐标的视图。

我自己公司项目里面没使用LineChart自带的坐标轴，全部自己绘制。主要是其坐标轴：1.在适配时，比例不一；2.在(X轴 坐标)数据量不同时，比例也不一致。就自己根据位置、比例关系，计算好位置 并 放置上X轴与Y轴(⭐️放置在self.view上，且置于最顶层)的自定制视图。

自己只顾到了位置上的效果！
如果什么地方有悖于作者原本的思想，还望指出！谢谢~

goyohol\'s essay