iOS超簡(jiǎn)易折線(xiàn)圖(初學(xué))

一喘帚、背景圖(表格):

- (void)drawTableLine {
    NSInteger count = 9;
    
    CGFloat spacing_X = self.frame.size.width/(count+1);
    CGFloat spacing_Y = self.frame.size.height/8;
    
    
    CGContextRef tableContext = UIGraphicsGetCurrentContext();
    CGMutablePathRef verticalPath = CGPathCreateMutable();
    for (int i = 0; i < count + 1; i++) {
        // 垂直線(xiàn)
        CGPathMoveToPoint(verticalPath, NULL, i*spacing_X, 0);
        CGPathAddLineToPoint(verticalPath, NULL, i*spacing_X, self.frame.size.height);
        CGContextStrokePath(tableContext);
        //        [[UIColor blueColor] setStroke];
        //        CGContextAddPath(tableContext, verticalPath);
        //        CGContextDrawPath(tableContext, kCGPathStroke);
        
    }
    for ( int i = 0; i < 8; i++) {
        // 水平線(xiàn)
        CGPathMoveToPoint(verticalPath, NULL, 0, i*spacing_Y);
        CGPathAddLineToPoint(verticalPath, NULL, self.frame.size.width, i*spacing_Y);
        CGContextStrokePath(tableContext);
        [[UIColor orangeColor] setStroke];
        CGContextAddPath(tableContext, verticalPath);
        CGContextDrawPath(tableContext, kCGPathStroke);
    }
    CGPathRelease(verticalPath);
}

效果圖:


二诡壁、折線(xiàn)圖:

- (void)drawGraph {
    NSInteger count = self.valueArray.count;
    NSInteger max = [[self.valueArray valueForKeyPath:@"@max.floatValue"] integerValue]+2;
    NSInteger min = [[self.valueArray valueForKeyPath:@"@min.floatValue"] integerValue]-2;
   
    CGFloat spacing_X = self.frame.size.width/(count+1);
    CGFloat spacing_Y = self.frame.size.height/(max-min);
   
    CGContextRef graphContext = UIGraphicsGetCurrentContext();
    CGMutablePathRef graphPath = CGPathCreateMutable();

    for (int i = 0; i < count-1; i++) {
        NSInteger value = [self.valueArray[i] integerValue];
        NSInteger value1 = [self.valueArray[i+1] integerValue];
   
        CGPathMoveToPoint(graphPath, NULL, (i+1)*spacing_X+PointRadius, (max-value)*spacing_Y);
        CGPathAddLineToPoint(graphPath, NULL, (i+2)*spacing_X-PointRadius, (max-value1)*spacing_Y);
        CGContextSetLineWidth(graphContext, 0.5);
   
        CGContextAddPath(graphContext, graphPath);
        CGContextStrokePath(graphContext);
        [[UIColor blueColor] setStroke];
        CGContextDrawPath(graphContext, kCGPathStroke);
    }
    CGPathRelease(graphPath);
}

效果如圖:


三障贸、圓點(diǎn):
在每個(gè)坐標(biāo)點(diǎn)加一個(gè)圓點(diǎn)

//  注:折線(xiàn)圖中的點(diǎn)可以使用button/label實(shí)現(xiàn)  也可以使用畫(huà)點(diǎn)實(shí)現(xiàn)
- (void)drawPoint {
    NSInteger count = self.valueArray.count;
   
    CGContextRef pointContext = UIGraphicsGetCurrentContext();
    CGMutablePathRef pointPath = CGPathCreateMutable();
   
    NSInteger max = [[self.valueArray valueForKeyPath:@"@max.floatValue"] integerValue]+2;
    NSInteger min = [[self.valueArray valueForKeyPath:@"@min.floatValue"] integerValue]-2;
   
    CGFloat spacing_X = self.frame.size.width/(count+1);
    CGFloat spacing_Y = self.frame.size.height/(max-min);
   
    for (int i = 0; i < count; i++) {
        NSInteger value = [self.valueArray[i] integerValue];
       
        CGRect rect = CGRectMake((i+1)*spacing_X-PointRadius, (max-value)*spacing_Y-PointRadius, 2*PointRadius, 2*PointRadius);
        CGPathAddEllipseInRect(pointPath, NULL, rect);
        CGContextAddPath(pointContext, pointPath);
        CGContextStrokePath(pointContext);
        [[UIColor blueColor] setStroke];
        CGContextDrawPath(pointContext, kCGPathFill);
    }
}

效果圖如下:


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末炼吴,一起剝皮案震驚了整個(gè)濱河市味滞,隨后出現(xiàn)的幾起案子粱锐,更是在濱河造成了極大的恐慌粘室,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件卜范,死亡現(xiàn)場(chǎng)離奇詭異衔统,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門(mén)锦爵,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)舱殿,“玉大人,你說(shuō)我怎么就攤上這事险掀』ο” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵樟氢,是天一觀的道長(zhǎng)冈绊。 經(jīng)常有香客問(wèn)我,道長(zhǎng)埠啃,這世上最難降的妖魔是什么死宣? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮碴开,結(jié)果婚禮上毅该,老公的妹妹穿的比我還像新娘。我一直安慰自己潦牛,他們只是感情好眶掌,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著巴碗,像睡著了一般朴爬。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上橡淆,一...
    開(kāi)封第一講書(shū)人閱讀 51,365評(píng)論 1 302
  • 那天召噩,我揣著相機(jī)與錄音,去河邊找鬼明垢。 笑死蚣常,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的痊银。 我是一名探鬼主播抵蚊,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼溯革!你這毒婦竟也來(lái)了贞绳?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤致稀,失蹤者是張志新(化名)和其女友劉穎冈闭,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體抖单,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡萎攒,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年遇八,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片耍休。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡刃永,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出羊精,到底是詐尸還是另有隱情斯够,我是刑警寧澤,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布喧锦,位于F島的核電站读规,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏燃少。R本人自食惡果不足惜束亏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望供汛。 院中可真熱鬧枪汪,春花似錦涌穆、人聲如沸怔昨。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)趁舀。三九已至,卻和暖如春祝沸,著一層夾襖步出監(jiān)牢的瞬間矮烹,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工罩锐, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留奉狈,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓涩惑,卻偏偏與公主長(zhǎng)得像仁期,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子竭恬,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354

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

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,111評(píng)論 25 707
  • 說(shuō)明: 已將折線(xiàn)圖封裝到了一個(gè)UIView子類(lèi)中跛蛋,并提供了相應(yīng)的接口。若你遇到相應(yīng)的需求可以直接將文件拖到項(xiàng)目中痊硕,...
    AHLQ閱讀 7,428評(píng)論 5 47
  • 之前自學(xué)的時(shí)候也使用過(guò)echarts來(lái)制作柱狀圖赊级,折線(xiàn)圖,地圖岔绸,現(xiàn)在想想那時(shí)候做的簡(jiǎn)直是太LOW了理逊,就是簡(jiǎn)單的在官...
    _信仰zmh閱讀 82,152評(píng)論 23 66
  • 圖表思維是數(shù)據(jù)分析思維中的最簡(jiǎn)單和最基本的思維橡伞,主要是通過(guò)圖形和表格對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)化。 文字有局限 看到這段話(huà)晋被,你會(huì)...
    keeya閱讀 5,662評(píng)論 1 21
  • snyang閱讀 257評(píng)論 0 1