iOS:渐变颜色的折线图

项目中要使用有渐变颜色的折线图，所以最近研究了一下，写一个简单的教程，主要是为了能让人明白最主要的功能，主要讲的是实现的思路，所以尽量简化了。

首先，我是用UIBezierPath + CAShapeLayer画线，用CAGradientLayer写渐变图层。

这里只讲一下CAGradientLayer：

初始化方式，以及设置frame跟CAShapelayer没什么区别，具体说一下其他的属性。

colors:图层内渐变的颜色的数组，是CGColor的类别

startPoint和endPoint：可以设置渐变的方向是竖直的从上到下，或是从下到上，或是斜着渐变等。

locations:是CAGradientLayer中颜色渐变区间的数组，如果不设置这个属性，系统会自动帮你设置渐变区间。

例如：_gradientLayer.location = @[@(0.1),@(0.2)],这样的形式。

另外，用UIBezierPath的原因是在于UIBezierPath其实是对Core Graphics框架关于path的进一步封装，所以使用起来比较简单。

其次是对折线图进行细分，我把折线图分为坐标轴X轴和Y轴部分、折线图绘制部分、渐变图层绘制部分，这三部分来完成。

1、X轴和Y轴

首先是找原点，我先将原点距view的左和下的距离设置出来，就很容易能得到原点的坐标，然后通过原点的坐标绘制X轴跟Y轴.

接下来上代码：

在创建X轴跟Y轴的时候，利用Core Graphics绘制文字比较方便，所以把文字跟线条分开绘制。

坐标轴不细说，demo中会有详细的注释。

主要讲一下折线以及渐变图层的绘制。

绘制折线只要将每个数据的坐标点算出来，就很容易了绘制了。

首先，计算X轴以及Y轴的刻度单位。

其次计算数组中每个点的坐标。

其中，path是折线的路径，newPath是渐变图层的路径，lastPointX和lastPointY是为了看最后一个点的位置，得出渐变图层的范围。

然后添加到最后一个点的线。

接着有了折线的路径，以及渐变图层的路径，就可以将这两个路径赋值给layer。

赋值过后，然后将渐变图层的遮罩层设置为CAShapelayer就完成了。

demo:渐变颜色的折线图