項(xiàng)目中要使用有漸變顏色的折線圖，所以最近研究了一下，寫一個簡單的教程，主要是為了能讓人明白最主要的功能，主要講的是實(shí)現(xiàn)的思路，所以盡量簡化了。

首先，我是用UIBezierPath + CAShapeLayer畫線，用CAGradientLayer寫漸變圖層。

這里只講一下CAGradientLayer：

初始化方式，以及設(shè)置frame跟CAShapelayer沒什么區(qū)別，具體說一下其他的屬性。

colors:圖層內(nèi)漸變的顏色的數(shù)組，是CGColor的類別

startPoint和endPoint：可以設(shè)置漸變的方向是豎直的從上到下，或是從下到上，或是斜著漸變等。

locations:是CAGradientLayer中顏色漸變區(qū)間的數(shù)組，如果不設(shè)置這個屬性，系統(tǒng)會自動幫你設(shè)置漸變區(qū)間。

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

另外，用UIBezierPath的原因是在于UIBezierPath其實(shí)是對Core Graphics框架關(guān)于path的進(jìn)一步封裝，所以使用起來比較簡單。

其次是對折線圖進(jìn)行細(xì)分，我把折線圖分為坐標(biāo)軸X軸和Y軸部分、折線圖繪制部分、漸變圖層繪制部分，這三部分來完成。

1、X軸和Y軸

首先是找原點(diǎn)，我先將原點(diǎn)距view的左和下的距離設(shè)置出來，就很容易能得到原點(diǎn)的坐標(biāo)，然后通過原點(diǎn)的坐標(biāo)繪制X軸跟Y軸.

接下來上代碼：

在創(chuàng)建X軸跟Y軸的時候，利用Core Graphics繪制文字比較方便，所以把文字跟線條分開繪制。

坐標(biāo)軸不細(xì)說，demo中會有詳細(xì)的注釋。

主要講一下折線以及漸變圖層的繪制。

繪制折線只要將每個數(shù)據(jù)的坐標(biāo)點(diǎn)算出來，就很容易了繪制了。

首先，計算X軸以及Y軸的刻度單位。

其次計算數(shù)組中每個點(diǎn)的坐標(biāo)。

其中，path是折線的路徑，newPath是漸變圖層的路徑，lastPointX和lastPointY是為了看最后一個點(diǎn)的位置，得出漸變圖層的范圍。

然后添加到最后一個點(diǎn)的線。

接著有了折線的路徑，以及漸變圖層的路徑，就可以將這兩個路徑賦值給layer。

賦值過后，然后將漸變圖層的遮罩層設(shè)置為CAShapelayer就完成了。

demo:漸變顏色的折線圖