绘制折线图

>请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。实现效果:

>![](http://upload-images.jianshu.io/upload_images/693359-48d9c7c9f56a4b13.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

代码原型:SHLineGraphView 大家可以自行下载,文档最低部有注释版的示例代码.

示例实现了超过具体数值可以将点替换为特定图片,将竖轴开始的数值从特定数值开始,同时支持多条线段同时绘制.

首先在这里解释一下下面的两个方法,

关于绘制线段,首先需要的就是一个起点,也就是CGPathMoveToPoint

之后我们还需要一个终点,也就是CGPathAddLineToPoint

使用的时候需要注意,第一个参数是你所需要绘制的路径CGMutablePathReflinesPath =CGPathCreateMutable();

//绘制横线的起点

CGPathMoveToPoint(linesPath,NULL, currentLabelPoint.x+ xIntervalInPx/2, currentLabelPoint.y);

//绘制横线的距离长度

CGPathAddLineToPoint(linesPath,NULL, currentLabelPoint.x+ xIntervalInPx/2, currentLabelPoint.y- intervalInPx1);

当我们给定了线段的起点和终点的时候,我们就能够在图层上成功的绘制一条线段了

需要注意,我们绘制线段的起点都是图层的左上角

1.首先来看主视图中都需要填写什么信息

2.之后我们来看实际使用中需要更改的地方SHLineGraphView.m

设置需要顶部和底部的距离

同时设置竖轴最多有多少个点,下面会使用到

4.之后设置一个X和Y,用于下面保存具体坐标参数

5.之后开始设置默认的图层

6.开始绘制折线图,但是在开始前我们首先需要将折线图的位置变成具体的数值

7.接下来开始绘制点 ,绘制点我们首先需要三个图层,分别用来存放逻辑填充图 , 圈层的图层和后台的路径.

8.之后根据具体Y轴的坐标和上方提到的数值个数来计算出每一个文字之间距离

9.现在添加不同点之间的路径以及绘制折线图时候的动画效果,同时我们也可以把对应点的位置的点击事件添加上去

10.现在绘制X轴的文字

11.同理 , 绘制Y轴的提示性文字

12.当X轴和Y轴的提示性文字都已经绘制完成的时候,我们就开始绘制折线图的线了

13.最后我们还可以将每个点对应的点击事件添加上去

这时候我们就已经成功绘制了一个折线图了

之后我们还可以继续完善,例如将折点的线编程一段一段的线段,或者在线段之间可以使用渐变色等.

示例 demo:

https://github.com/larra123/linePath

补充: 折线图的点随着数值变色在绘制点的方法- (void)drawPlot:(SHPlot*)plot内进行修改