工作中碰到,没有用之前支持 K 线的第三方库,而是自己摸索了一下,因为需求也没有高的要求。
用直线绘制其实也是可以的,相交部分用圆角过度还行,但只就美观效果来说,跟曲线的拟合相比差远了。
可惜 iOS 下绘制曲线用的 UIBezierPath 仅支持有限点的控制,后台下发的数据可不止那几个点,这个时候就用到下面说的曲线的平滑了。
网上说到的曲线平滑算法有不少,而我只会使用 UIBezierPath 来绘制,github 上找到的有 2、3 个都是可以用的,比如下面这个:
绘制出来的还是挺好看的,唯一的缺点在于,虽然都经过了数据点,但数据点并不是在区域范围的极值点上,也就是说,数据点在曲线里面不是曲线的最高、最低点,曲线的最高、最低值,在数据集的范围之外,这就挺不好的。
不过就曲线平滑这一点看,上面这个库还是很好用的。
二维的图表,为了在一张图表上表示所有的数据点,X、Y 轴上是需要刻度单位的,在 app 上虽然各图表的大小都一样,但是可能喂进去的数据各不相同,很多时候,并不需要同样的刻度来表现曲线,否则有的曲线,在刻度间隔较大的情况下,视觉上更像一条直线,表现不出具体的变化了。
这个时候需要将 Y 轴的刻度变小,以上原因,不管是 X 轴、Y 轴,都需要根据数据集的范围,选择一个合理的刻度变化(在 UI 大小相同、而数据集不同的情况下)。
我记得之前看的第三方库,用的是 matrix 来做变换的,我自己操作的过程中,没有懂这个,反正都是线性的,索性单独建立 X、Y 轴的比例映射了。
就是转换的时候麻烦一点,显示的时候是 data -> ui mapping,用户选择图表点的时候,是 ui -> data mapping。
以上,就是手搓 iOS 图表绘制的几个要点了,最困难的点,是使用 UIBezierPath 曲线来平滑,得用到看不懂的代码,可选的方案是绘制直线,转交点用 round 来做,效果吧,勉勉强强,也是能用的。