简述：
折线图的使用场景主要集中在股票和与运动相关的APP界面中，运动类的如苹果健康，微信健康等。
WeChat_1472545882.jpeg
WeChat_1464241434.jpeg
其中运动类APP中一般支持查看天、月、年的数据图，由于界面宽度有限，当显示整月数据的时候，点与点之间的距离就会很近，用户也很难大概的估计点的数值，因此有的APP的折线图还支持点的点击查看数值功能，如微信运动的月数据（上图）,接下来就介绍一下如何绘制实现这样的界面和点击查看功能。
逻辑步骤：
1.首先图表的显示是通过绘制图层实现的，而由于渐变效果需要对图层进行剪切，所以要达到这样的显示效果，要两个View叠加显示，下层View为横纵坐标层，上层为折线图层。考虑到大部分折线图都会有侧滑加载更多的需求，因此笔者也用collectionView实现了该功能。
2.关于数据的计算，笔者绘制的图表中的数据分为4部分，分别为：纵坐标，横坐标，计算后的点和显示点的实际数值。其中需要计算的一般为纵坐标，和显示点。由于笔者demo中用的都是计算过的假数据，所以此处详细的说一下数据到转化到图表显示坐标和点的思路。
纵坐标的计算思路：
获取到该组数据的最大数值后，按约定取大于等于该最大值的一个值，例如：最大值为15987，约定是必须为整百，所以此处取16000，而此处分为4个阶段，16000/4 = 4000; 五个纵坐标就出来了（0，4000，8000，12000，16000）;
点的计算思路：
此处表中拿到的初始数据是（步数，日期），需要转化为实际的坐标点（x，y）, 此处假设图表的区域宽和高分别为chartW、chartH,图中横坐标为一周的日期，一周7天为6段，每一段gap = chartW/6, x 根据数组中日期的count分别乘以gap就可以获取到了。 y的计算，计算点的步数数值设为stepY,该层图表的最大Y值设为MaxY,y = stepY*maxY/chartH; 这样就将（步数，日期）转化为（x,y）了。
3.关于点击折线图点显示该点数据的问题，毫无疑问，接受点击的是折线图的上层View,所以在该图层的touchsBegan方法中获取点击的点，然后在该页面的所有点中遍历判断达到临界距离后，通过代理把距离最近的点的数值传给控制器或者父视图，让其动态显示。而需要注意的是，在页面滑动或者重新加载数据时，要记得清除显示数据。
demo地址 GitHub给个Star噢!
喜欢就点个赞呗!
欢迎大家提出更好的改进意见和建议，一起进步！
网友评论