折線圖

前言:

在很多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;

源碼地址github


總結(jié):在繪制折線圖的時(shí)候需要注意我上面所說的2點(diǎn),那么就可以輕輕松松繪制出來了怠肋。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市淹朋,隨后出現(xiàn)的幾起案子笙各,更是在濱河造成了極大的恐慌,老刑警劉巖础芍,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件杈抢,死亡現(xiàn)場離奇詭異,居然都是意外死亡仑性,警方通過查閱死者的電腦和手機(jī)惶楼,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來诊杆,“玉大人歼捐,你說我怎么就攤上這事〕啃冢” “怎么了豹储?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵,是天一觀的道長淘这。 經(jīng)常有香客問我剥扣,道長,這世上最難降的妖魔是什么铝穷? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任钠怯,我火速辦了婚禮,結(jié)果婚禮上曙聂,老公的妹妹穿的比我還像新娘晦炊。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布刽锤。 她就那樣靜靜地躺著镊尺,像睡著了一般。 火紅的嫁衣襯著肌膚如雪并思。 梳的紋絲不亂的頭發(fā)上庐氮,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天,我揣著相機(jī)與錄音宋彼,去河邊找鬼弄砍。 笑死,一個(gè)胖子當(dāng)著我的面吹牛输涕,可吹牛的內(nèi)容都是我干的音婶。 我是一名探鬼主播,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼莱坎,長吁一口氣:“原來是場噩夢啊……” “哼衣式!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起檐什,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤碴卧,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后乃正,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體住册,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年瓮具,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了荧飞。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,617評論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡名党,死狀恐怖叹阔,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情传睹,我是刑警寧澤条获,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布,位于F島的核電站蒋歌,受9級特大地震影響帅掘,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜堂油,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一修档、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧府框,春花似錦吱窝、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽兴使。三九已至,卻和暖如春照激,著一層夾襖步出監(jiān)牢的瞬間发魄,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工俩垃, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留励幼,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓口柳,卻偏偏與公主長得像苹粟,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子跃闹,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,486評論 2 348

推薦閱讀更多精彩內(nèi)容