iOS-折線圖(LineChart)

最近公司項目中需要用到折線圖挽唉,本來想著使用成熟的第三方框架塘秦,但是不能很好地滿足項目需求建蹄,索性自己實現(xiàn)和封裝了一個碌更。

1.功能簡介

支持或滿足以下功能,如下:

  • x軸洞慎、y軸分別可支持是否顯示痛单,以及它的顏色、線寬
  • x軸文字支持大小劲腿、顏色旭绒、旋轉
  • y軸文字可支持是否顯示、大小焦人、顏色挥吵、格式
  • y軸坐標值可不設置,可根據(jù)點的值自動計算
  • 折線圖可支持設置邊距
  • 橫向分隔虛線可支持是否顯示花椭,以及它的顏色忽匈、線寬
  • 折線可支持動畫、顏色矿辽、線寬丹允,支持顯示一條或多條折線
  • 折線可支持直線、貝塞爾曲線
  • 折線上的點支持是否顯示袋倔、填充顏色雕蔽、描邊顏色,以及有圓形宾娜、方形批狐、三角形三種形狀可選
  • 折線上的點支持是否顯示文字,以及文字的顏色碳默、大小以及格式
  • 可支持顯示漸變區(qū)域
  • 可支持折線圖數(shù)據(jù)更新

大家肯定會說:無圖說個JB贾陷。行,先上效果圖嘱根,是不是有種熟悉的感覺髓废?


折線圖.png

2.實現(xiàn)步驟

實現(xiàn)步驟大概如下:

  1. 首先繪制x軸、y軸该抒、分割點和橫向網(wǎng)格虛線
  2. 創(chuàng)建并顯示x軸和y軸的文字控件
  3. 計算所有折線上點的位置
  4. 繪制折線以及折線上的點
  5. 創(chuàng)建并顯示折線上點的文字控件

實現(xiàn)步驟很清晰慌洪,看上去不難,其實里面有很多細節(jié)需要調整和優(yōu)化,比較花時間冈爹。

3.如何使用

那我直接上代碼涌攻,這樣就一目了然,使用起來還是很簡單的

GBLineChart *chart = [[GBLineChart alloc] initWithFrame:CGRectMake(0, 100, CGRectGetWidth(self.view.bounds), 220)];
    [self.view addSubview:chart];
    chart.xLabelTitles = @[@"1月",@"2月",@"3月",@"4月",@"5月",@"6月",@"7月",@"8月",@"9月",@"10月",@"11月",@"12月",];
    chart.yLabelTitles = @[@"0", @"20", @"40", @"60", @"80", @"100"];
    chart.xLabelRotationAngle = M_PI/6;
    chart.showCoordinateAxis = YES;
    chart.xLabelAlignmentStyle = GBXLabelAlignmentStyleFullXAxis;
    
    NSMutableArray *array = [NSMutableArray array];
    NSMutableArray *array1 = [NSMutableArray array];

    for (int i = 0; i < chart.xLabelTitles.count; i++) {
        NSNumber *a = [NSNumber numberWithInteger:arc4random() % 100];
        [array addObject:a];
        [array1 addObject:[NSNumber numberWithInteger:arc4random() % 100]];
    }
    
    GBLineChartData *data = [GBLineChartData new];
    data.lineAlpha = 0.7;
    data.lineColor = [UIColor blueColor];
    data.lineWidth = 1;
    data.itemCount = array.count;
    data.lineChartPointStyle = GBLineChartPointStyleCircle;
    data.inflexionPointStrokeColor = [UIColor redColor];
    data.inflexionPointFillColor = [UIColor greenColor];
    data.inflexionPointWidth = 6;
    data.showDash = YES;
    data.lineDashPattern = @[@1,@1];
    
    data.showPointLabel = YES;
    data.pointLabelFont = [UIFont systemFontOfSize:10];
    data.pointLabelColor = [UIColor blackColor];
    data.pointLabelFormat = @"%0.1f";
    
    data.dataGetter = ^GBLineChartDataItem *(NSInteger item) {
      
        return [GBLineChartDataItem dataItemWithY:[array[item] floatValue]];
    };
    
    GBLineChartData *data1 = [GBLineChartData new];
    data1.lineAlpha = 1;
    data1.lineColor = [UIColor orangeColor];
    data1.lineWidth = 1;
    data1.itemCount = array1.count;
    data1.lineChartPointStyle = GBLineChartPointStyleSquare;
    data1.inflexionPointStrokeColor = [UIColor cyanColor];
    data1.inflexionPointWidth = 5;
    
    data1.showPointLabel = NO;
    data1.pointLabelFont = [UIFont systemFontOfSize:10];
    data1.pointLabelColor = [UIColor blackColor];
    data1.pointLabelFormat = @"%1.0f";
    data1.showGradientArea = YES;
    data1.startGradientColor = [[UIColor yellowColor] colorWithAlphaComponent:0.6];
    data1.endGradientColor = [[UIColor whiteColor] colorWithAlphaComponent:0.0];
    
    data1.dataGetter = ^GBLineChartDataItem *(NSInteger item) {
        
        return [GBLineChartDataItem dataItemWithY:[array1[item] floatValue]];
    };
    
    chart.lineChartDatas = @[data, data1];
    chart.chartMarginLeft = 25;

    chart.yLabelBlockFormatter = ^NSString *(CGFloat value) {
      
        return [NSString stringWithFormat:@"%0.0f", value];
    };
    chart.showSmoothLines = YES;
    [chart strokeChart];
    _lineChart = chart;

嗯频伤,是吧恳谎!使用起來還是很簡單的。知道你們會說最后demo地址憋肖,放心因痛,會有的。這不來了么岸更?
傳送門:折線圖Demo下載
好了鸵膏,最后希望大大們下載和使用,提出寶貴意見怎炊,一起學習進步~~~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末谭企,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子评肆,更是在濱河造成了極大的恐慌债查,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件瓜挽,死亡現(xiàn)場離奇詭異攀操,居然都是意外死亡,警方通過查閱死者的電腦和手機秸抚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來歹垫,“玉大人剥汤,你說我怎么就攤上這事∨挪遥” “怎么了吭敢?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長暮芭。 經(jīng)常有香客問我鹿驼,道長,這世上最難降的妖魔是什么辕宏? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任畜晰,我火速辦了婚禮,結果婚禮上瑞筐,老公的妹妹穿的比我還像新娘凄鼻。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布块蚌。 她就那樣靜靜地躺著闰非,像睡著了一般。 火紅的嫁衣襯著肌膚如雪峭范。 梳的紋絲不亂的頭發(fā)上财松,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天,我揣著相機與錄音纱控,去河邊找鬼辆毡。 笑死,一個胖子當著我的面吹牛其徙,可吹牛的內容都是我干的胚迫。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼唾那,長吁一口氣:“原來是場噩夢啊……” “哼访锻!你這毒婦竟也來了?” 一聲冷哼從身側響起闹获,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤期犬,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后避诽,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體龟虎,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年沙庐,在試婚紗的時候發(fā)現(xiàn)自己被綠了鲤妥。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡拱雏,死狀恐怖棉安,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情铸抑,我是刑警寧澤贡耽,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站鹊汛,受9級特大地震影響蒲赂,放射性物質發(fā)生泄漏。R本人自食惡果不足惜刁憋,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一滥嘴、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧至耻,春花似錦氏涩、人聲如沸届囚。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽意系。三九已至,卻和暖如春饺汹,著一層夾襖步出監(jiān)牢的瞬間蛔添,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工兜辞, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留迎瞧,地道東北人。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓逸吵,卻偏偏與公主長得像凶硅,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子扫皱,可洞房花燭夜當晚...
    茶點故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內容

  • matplotlib畫折線圖 假設一天中每隔兩個小時(range(2,26,2))的氣溫(℃)分別是[15,13,...
    Daily_Note閱讀 3,777評論 0 2
  • 說明: 已將折線圖封裝到了一個UIView子類中足绅,并提供了相應的接口。若你遇到相應的需求可以直接將文件拖到項目中韩脑,...
    AHLQ閱讀 7,432評論 5 47
  • 圖表控件庫 MPAndroidChart 的使用 使用方法 項目源碼地址氢妈,包含了很多類型的圖標 https://g...
    jinchuang閱讀 821評論 0 0
  • 001自由的人生不需要解釋 吃一口冰淇淋就是香甜,吹著海風就是涼爽段多,這是毋庸置疑的事實首量。 思考是為了不思考,工作是...
    小胖紅閱讀 300評論 2 1
  • 由于是使用的系統(tǒng)是Deepin进苍,所以選用了lexmaker 這個軟件加缘。由于需要在linux很多軟件都不支持中文需要...
    瘋狂的冰塊閱讀 252評論 0 0