首先先看一下效果:
一、 初始化折線圖對象
創建一個折線圖的用到的類是linechartview.h, 代碼如下:
|
1
2
3
4
5
6
7
8
9
|
self.linechartview = [[linechartview alloc] init];self.linechartview.delegate = self;//設置代理[self.view addsubview:self.linechartview];[self.linechartview mas_makeconstraints:^(masconstraintmaker *make) { make.size.mas_equalto(cgsizemake(self.view.bounds.size.width-20, 300)); make.center.mas_equalto(self.view);}];self.linechartview.backgroundcolor = [uicolor colorwithred:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];self.linechartview.nodatatext = @"暫無數據"; |
二、設置折線圖外觀樣式
1.設置交互樣式
|
1
2
3
4
5
|
self.linechartview.scaleyenabled = no;//取消y軸縮放self.linechartview.doubletaptozoomenabled = no;//取消雙擊縮放self.linechartview.dragenabled = yes;//啟用拖拽圖標self.linechartview.dragdecelerationenabled = yes;//拖拽后是否有慣性效果self.linechartview.dragdecelerationfrictioncoef = 0.9;//拖拽后慣性效果的摩擦系數(0~1)，數值越小，慣性越不明顯 |
2.設置x軸樣式
|
1
2
3
4
5
6
|
chartxaxis *xaxis = self.linechartview.xaxis;xaxis.axislinewidth = 1.0/[uiscreen mainscreen].scale;//設置x軸線寬xaxis.labelposition = xaxislabelpositionbottom;//x軸的顯示位置，默認是顯示在上面的xaxis.drawgridlinesenabled = no;//不繪制網格線xaxis.spacebetweenlabels = 4;//設置label間隔xaxis.labeltextcolor = [self colorwithhexstring:@"#057748"];//label文字顏色 |
3.設置y軸樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
self.linechartview.rightaxis.enabled = no;//不繪制右邊軸chartyaxis *leftaxis = self.linechartview.leftaxis;//獲取左邊y軸leftaxis.labelcount = 5;//y軸label數量，數值不一定，如果forcelabelsenabled等于yes, 則強制繪制制定數量的label, 但是可能不平均leftaxis.forcelabelsenabled = no;//不強制繪制指定數量的labelleftaxis.showonlyminmaxenabled = no;//是否只顯示最大值和最小值leftaxis.axisminvalue = 0;//設置y軸的最小值leftaxis.startatzeroenabled = yes;//從0開始繪制leftaxis.axismaxvalue = 105;//設置y軸的最大值leftaxis.inverted = no;//是否將y軸進行上下翻轉leftaxis.axislinewidth = 1.0/[uiscreen mainscreen].scale;//y軸線寬leftaxis.axislinecolor = [uicolor blackcolor];//y軸顏色leftaxis.valueformatter = [[nsnumberformatter alloc] init];//自定義格式leftaxis.valueformatter.positivesuffix = @" $";//數字后綴單位leftaxis.labelposition = yaxislabelpositionoutsidechart;//label位置leftaxis.labeltextcolor = [self colorwithhexstring:@"#057748"];//文字顏色leftaxis.labelfont = [uifont systemfontofsize:10.0f];//文字字體 |
4.設置網格線樣式
主要是設置y軸的網格線樣式, 代碼如下:
|
1
2
3
|
leftaxis.gridlinedashlengths = @[@3.0f, @3.0f];//設置虛線樣式的網格線leftaxis.gridcolor = [uicolor colorwithred:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//網格線顏色leftaxis.gridantialiasenabled = yes;//開啟抗鋸齒 |
5.添加限制線
限制線可以添加多條, 在這里只添加一條做演示, 代碼如下:
|
1
2
3
4
5
6
7
8
9
|
chartlimitline *limitline = [[chartlimitline alloc] initwithlimit:80 label:@"限制線"];limitline.linewidth = 2;limitline.linecolor = [uicolor greencolor];limitline.linedashlengths = @[@5.0f, @5.0f];//虛線樣式limitline.labelposition = chartlimitlabelpositionrighttop;//位置limitline.valuetextcolor = [self colorwithhexstring:@"#057748"];//label文字顏色limitline.valuefont = [uifont systemfontofsize:12];//label字體[leftaxis addlimitline:limitline];//添加到y軸上leftaxis.drawlimitlinesbehinddataenabled = yes;//設置限制線繪制在折線圖的后面 |
6.設置折線圖描述及圖例樣式
當有多條折線顯示在圖表上時, 通常需要一個'圖例'來說明每一條折線的名稱或者代表的含義, 這時候就要進行圖例的設置, 主要代碼如下:
|
1
2
3
4
5
|
[self.linechartview setdescriptiontext:@"折線圖"];//折線圖描述[self.linechartview setdescriptiontextcolor:[uicolor darkgraycolor]];self.linechartview.legend.form = chartlegendformline;//圖例的樣式self.linechartview.legend.formsize = 30;//圖例中線條的長度self.linechartview.legend.textcolor = [uicolor darkgraycolor];//圖例文字顏色 |
除了可以用以上這些屬性來設置樣式以外, 還有其它很多屬性, 可以自行嘗試. 由于以上這些屬性較簡單, 從屬性名就可以看出其含義, 而且在代碼后面也大都有注釋, 在這里就不對這些屬性作一一解釋了.
三、為折線圖提供數據
為折線圖提供數據, 和柱形圖差不多, 唯一不同的是設置折線圖的折線線條樣式, 在設置線條樣式時, 我們可以設置折線的類型, 有階梯類型和一般類型. 我們也可以設置折線拐點的樣式, 拐點的大小, 拐點是否可以是空心類型等. 此外還可以對折線圖進行顏色填充, 以此來美化圖表. 由于樣式太多, 在這里就不多說了, 直接看代碼:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
- (linechartdata *)setdata{ int xvals_count = 12;//x軸上要顯示多少條數據 double maxyval = 100;//y軸的最大值 //x軸上面需要顯示的數據 nsmutablearray *xvals = [[nsmutablearray alloc] init]; for (int i = 0; i < xvals_count; i++) { [xvals addobject:[nsstring stringwithformat:@"%d月", i+1]]; } //對應y軸上面需要顯示的數據 nsmutablearray *yvals = [[nsmutablearray alloc] init]; for (int i = 0; i < xvals_count; i++) { double mult = maxyval + 1; double val = (double)(arc4random_uniform(mult)); chartdataentry *entry = [[chartdataentry alloc] initwithvalue:val xindex:i]; [yvals addobject:entry]; } linechartdataset *set1 = nil; if (self.linechartview.data.datasetcount > 0) { linechartdata *data = (linechartdata *)self.linechartview.data; set1 = (linechartdataset *)data.datasets[0]; set1.yvals = yvals; return data; }else{ //創建linechartdataset對象 set1 = [[linechartdataset alloc] initwithyvals:yvals label:@"linename"]; //設置折線的樣式 set1.linewidth = 1.0/[uiscreen mainscreen].scale;//折線寬度 set1.drawvaluesenabled = yes;//是否在拐點處顯示數據 set1.valuecolors = @[[uicolor browncolor]];//折線拐點處顯示數據的顏色 [set1 setcolor:[self colorwithhexstring:@"#007fff"]];//折線顏色 set1.drawsteppedenabled = no;//是否開啟繪制階梯樣式的折線圖 //折線拐點樣式 set1.drawcirclesenabled = no;//是否繪制拐點 set1.circleradius = 4.0f;//拐點半徑 set1.circlecolors = @[[uicolor redcolor], [uicolor greencolor]];//拐點顏色 //拐點中間的空心樣式 set1.drawcircleholeenabled = yes;//是否繪制中間的空心 set1.circleholeradius = 2.0f;//空心的半徑 set1.circleholecolor = [uicolor blackcolor];//空心的顏色 //折線的顏色填充樣式 //第一種填充樣式:單色填充// set1.drawfilledenabled = yes;//是否填充顏色// set1.fillcolor = [uicolor redcolor];//填充顏色// set1.fillalpha = 0.3;//填充顏色的透明度 //第二種填充樣式:漸變填充 set1.drawfilledenabled = yes;//是否填充顏色 nsarray *gradientcolors = @[(id)[chartcolortemplates colorfromstring:@"#ffffffff"].cgcolor, (id)[chartcolortemplates colorfromstring:@"#ff007fff"].cgcolor]; cggradientref gradientref = cggradientcreatewithcolors(nil, (cfarrayref)gradientcolors, nil); set1.fillalpha = 0.3f;//透明度 set1.fill = [chartfill fillwithlineargradient:gradientref angle:90.0f];//賦值填充顏色對象 cggradientrelease(gradientref);//釋放gradientref //點擊選中拐點的交互樣式 set1.highlightenabled = yes;//選中拐點,是否開啟高亮效果(顯示十字線) set1.highlightcolor = [self colorwithhexstring:@"#c83c23"];//點擊選中拐點的十字線的顏色 set1.highlightlinewidth = 1.0/[uiscreen mainscreen].scale;//十字線寬度 set1.highlightlinedashlengths = @[@5, @5];//十字線的虛線樣式 //將 linechartdataset 對象放入數組中 nsmutablearray *datasets = [[nsmutablearray alloc] init]; [datasets addobject:set1]; //添加第二個linechartdataset對象// linechartdataset *set2 = [set1 copy];// nsmutablearray *yvals2 = [[nsmutablearray alloc] init];// for (int i = 0; i < xvals_count; i++) {// double mult = maxyval + 1;// double val = (double)(arc4random_uniform(mult));// chartdataentry *entry = [[chartdataentry alloc] initwithvalue:val xindex:i];// [yvals2 addobject:entry];// }// set2.yvals = yvals2;// [set2 setcolor:[uicolor redcolor]];// set2.drawfilledenabled = yes;//是否填充顏色// set2.fillcolor = [uicolor redcolor];//填充顏色// set2.fillalpha = 0.1;//填充顏色的透明度// [datasets addobject:set2]; //創建 linechartdata 對象, 此對象就是linechartview需要最終數據對象 linechartdata *data = [[linechartdata alloc] initwithxvals:xvals datasets:datasets]; [data setvaluefont:[uifont fontwithname:@"helveticaneue-light" size:8.f]];//文字字體 [data setvaluetextcolor:[uicolor graycolor]];//文字顏色 nsnumberformatter *formatter = [[nsnumberformatter alloc] init]; //自定義數據顯示格式 [formatter setnumberstyle:nsnumberformatterdecimalstyle]; [formatter setpositiveformat:@"#0.0"]; [data setvalueformatter:formatter]; return data; }} |
代理方法和其他圖表一樣，這里就不再贅述了.
運行結果如下:
運行結果
為折線圖提供數據的用到的是linechartdata類創建的對象, 在linechartdata對象初始化時, 需要提供datasets數組(里面放的是linechartdataset對象), 上面的例子中datasets數組中只有一個linechartdataset對象, 也就是只有一條折線, 我們也可以在datasets數組中放入多個linechartdataset對象, 也就是多條曲線, 下面的結果就是添加2條折線的效果, 如下圖:
多條折線的折線圖
demo 下載地址: linechartdemo-master.rar
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持服務器之家！
原文鏈接：http://www.jianshu.com/p/27c756b536df
