>請各位讀者添加一下作者的微信公眾號，以后有新的文章，將在微信公眾號直接推送給各位，非常感謝。實現(xiàn)效果:
>
代碼原型:SHLineGraphView ?大家可以自行下載,文檔最低部有注釋版的示例代碼.
示例實現(xiàn)了超過具體數(shù)值可以將點替換為特定圖片,將豎軸開始的數(shù)值從特定數(shù)值開始,同時支持多條線段同時繪制.
首先在這里解釋一下下面的兩個方法,
關(guān)于繪制線段,首先需要的就是一個起點,也就是CGPathMoveToPoint
之后我們還需要一個終點,也就是CGPathAddLineToPoint
使用的時候需要注意,第一個參數(shù)是你所需要繪制的路徑CGMutablePathReflinesPath =CGPathCreateMutable();
//繪制橫線的起點
CGPathMoveToPoint(linesPath,NULL, currentLabelPoint.x+ xIntervalInPx/2, currentLabelPoint.y);
//繪制橫線的距離長度
CGPathAddLineToPoint(linesPath,NULL, currentLabelPoint.x+ xIntervalInPx/2, currentLabelPoint.y- intervalInPx1);
當(dāng)我們給定了線段的起點和終點的時候,我們就能夠在圖層上成功的繪制一條線段了
需要注意,我們繪制線段的起點都是圖層的左上角
1.首先來看主視圖中都需要填寫什么信息
2.之后我們來看實際使用中需要更改的地方SHLineGraphView.m
設(shè)置需要頂部和底部的距離
同時設(shè)置豎軸最多有多少個點,下面會使用到
4.之后設(shè)置一個X和Y,用于下面保存具體坐標(biāo)參數(shù)
5.之后開始設(shè)置默認的圖層
6.開始繪制折線圖,但是在開始前我們首先需要將折線圖的位置變成具體的數(shù)值
7.接下來開始繪制 點 ,繪制點我們首先需要三個圖層,分別用來存放 邏輯填充圖 , 圈層的圖層 和 后臺的路徑.
8.之后根據(jù)具體Y軸的坐標(biāo)和上方提到的數(shù)值個數(shù)來計算出每一個文字之間距離
9.現(xiàn)在添加不同點之間的路徑以及繪制折線圖時候的動畫效果,同時我們也可以把對應(yīng)點的位置的點擊事件添加上去
10.現(xiàn)在繪制X軸的文字
11.同理 , 繪制Y軸的提示性文字
12.當(dāng)X軸 和Y軸 的提示性文字都已經(jīng)繪制完成的時候,我們就開始繪制折線圖的線了
13.最后我們還可以將每個點對應(yīng)的點擊事件添加上去
這時候我們就已經(jīng)成功繪制了一個折線圖了
之后我們還可以繼續(xù)完善,例如將折點的線編程一段一段的線段,或者在線段之間可以使用漸變色等.
示例 demo:
https://github.com/larra123/linePath
補充: 折線圖的點隨著數(shù)值變色? 在繪制點的方法- (void)drawPlot:(SHPlot*)plot內(nèi)進行修改
