iOS使用Charts框架繪製折線圖

首先先看一下效果:

折線圖

一、 初始化折線圖物件

建立一個折線圖的用到的類是LineChartView.h, 程式碼如下:

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.設定互動樣式

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軸樣式

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軸樣式

self.LineChartView.rightAxis.enabled = NO;//不繪製右邊軸

ChartYAxis *leftAxis = self.LineChartView.leftAxis;//獲取左邊Y軸

leftAxis.labelCount = 5;//Y軸label數量，數值不一定，如果forceLabelsEnabled等於YES, 則強制繪製制定數量的label, 但是可能不平均

leftAxis.forceLabelsEnabled = NO;//不強制繪製指定數量的label

leftAxis.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軸的網格線樣式, 程式碼如下:

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.新增限制線

限制線可以新增多條, 在這裡只新增一條做演示, 程式碼如下:

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.設定折線圖描述及圖例樣式

當有多條折線顯示在圖表上時, 通常需要一個'圖例'來說明每一條折線的名稱或者代表的含義, 這時候就要進行圖例的設定, 主要程式碼如下:

[self.LineChartView setDescriptionText:@"折線圖"];//折線圖描述

[self.LineChartView setDescriptionTextColor:[UIColor darkGrayColor]];

self.LineChartView.legend.form = ChartLegendFormLine;//圖例的樣式

self.LineChartView.legend.formSize = 30;//圖例中線條的長度

self.LineChartView.legend.textColor = [UIColor darkGrayColor];//圖例文字顏色

除了可以用以上這些屬性來設定樣式以外, 還有其它很多屬性, 可以自行嘗試. 由於以上這些屬性較簡單, 從屬性名就可以看出其含義, 而且在程式碼後面也大都有註釋, 在這裡就不對這些屬性作一一解釋了.

三、為折線圖提供資料

為折線圖提供資料, 和柱形圖差不多, 唯一不同的是設定折線圖的折線線條樣式, 在設定線條樣式時, 我們可以設定折線的型別, 有階梯型別和一般型別. 我們也可以設定折線拐點的樣式, 拐點的大小, 拐點是否可以是空心型別等. 此外還可以對摺線圖進行顏色填充, 以此來美化圖表. 由於樣式太多, 在這裡就不多說了, 直接看程式碼:

- (LineChartData *)setData{

 intxVals_count = 12;//X軸上要顯示多少條資料

 doublemaxYVal = 100;//Y軸的最大值

 //X軸上面需要顯示的資料

 NSMutableArray *xVals = [[NSMutableArray alloc] init];

 for(inti = 0; i < xVals_count; i++) {

 [xVals addObject:[NSString stringWithFormat:@"%d月", i+1]];

 }

 //對應Y軸上面需要顯示的資料

 NSMutableArray *yVals = [[NSMutableArray alloc] init];

 for(inti = 0; i < xVals_count; i++) {

 doublemult = maxYVal + 1;

 doubleval = (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;

 returndata;

 }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];

 returndata;

 }

}

代理方法和其他圖表一樣，這裡就不再贅述了.

執行結果如下:

執行結果

為折線圖提供資料的用到的是LineChartData類建立的物件, 在LineChartData物件初始化時, 需要提供dataSets陣列(裡面放的是LineChartDataSet物件), 上面的例子中dataSets陣列中只有一個LineChartDataSet物件, 也就是隻有一條折線, 我們也可以在dataSets陣列中放入多個LineChartDataSet物件, 也就是多條曲線, 下面的結果就是新增2條折線的效果, 如下圖:

多條折線的折線圖