前言:
在很多app應(yīng)用會有數(shù)據(jù)統(tǒng)計(jì)功能,為此就要用到圖表呕屎,在這里我先說折線圖實(shí)現(xiàn)原理让簿。
大家都知道,折線圖上點(diǎn)的位置大小是會大于屏幕寬高秀睛,為此尔当,我們要通過個(gè)等比例計(jì)算,計(jì)算出該點(diǎn)在屏幕的具體位置蹂安。
公式:
? ? ? 設(shè)折線點(diǎn)p(x,y) , 視圖view的size(width,height), 縱坐標(biāo)y最大值ymax椭迎,橫坐標(biāo)x最大值xmax.
? ? ? x = width/xmax*(xmax-x)
? ? ? y = height/ymax*(ymax-y)
需要注意的有2點(diǎn):
? ?1、y軸上的值應(yīng)該通過最大值來等比例劃分(如果不是等比例劃分田盈,那么計(jì)算出來的折線點(diǎn)y是不對的)畜号。
? ?2、多個(gè)折線共存一個(gè)視圖允瞧,那么y軸最大值應(yīng)該是這些折線中取最大ymax弄兜,而不是每次繪制一根折線,取這根折線最大值ymax瓷式。
效果圖:
首先替饿,我們來繪制x,y軸贸典。
我這里為了方便视卢,所以就在drawRect方法里直接繪制。
接下來廊驼,就是繪制折線圖背景圖層以及x軸月份(為什么不連同y軸的值一起繪制呢据过,那是因?yàn)閥軸的值是要根據(jù)傳入的最大值來繪制)
接下來,外部我傳個(gè)y軸最大值verticalMaxValue = 1000和y軸值單位妒挎,然后繪制y軸上的點(diǎn)以及值單位绳锅、虛線。
通過傳入的最大值verticalMaxValue酝掩,來10等份算出y軸上所有值鳞芙。
繪制y軸上的點(diǎn)以及單位、虛線
最后,外部傳入折線點(diǎn)和路徑顏色原朝、點(diǎn)顏色驯嘱,通過我上面所說的公式來算出每個(gè)點(diǎn)的x,y,利用貝塞爾將這些點(diǎn)連起來喳坠。
再通過set方法把曲線路徑顏色鞠评,點(diǎn)顏色傳入。
_chartView.values = @[
@[@500,@200,@600,@400,@800,@900,@700,@500,@300,@100],
@[@1000,@800,@300,@600,@100,@400,@700,@200],
@[@100,@200,@700,@300,@600,@400,@800,@700,@300,@600]
];
_chartView.colorChartValues = @[[UIColor greenColor],[UIColor blueColor],[UIColor yellowColor]];
_chartView.colorPointValus = @[[UIColor magentaColor],[UIColor cyanColor],[UIColor purpleColor]];
結(jié)尾壕鹉,動(dòng)態(tài)繪制路徑剃幌,默認(rèn)不動(dòng)態(tài)繪制路徑,需要手動(dòng)打開晾浴,即在外部將改成YES即可锥忿。
_chartView.isAnimation = YES;