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