iOS使用Charts框架繪制折線圖
首先先看一下效果:

折線圖
一、 初始化折線圖對(duì)象
創(chuàng)建一個(gè)折線圖的用到的類是LineChartView.h, 代碼如下:
self.LineChartView = [[LineChartView alloc] init];
self.LineChartView.delegate = self;//設(shè)置代理
[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 = @"暫無(wú)數(shù)據(jù)";
二、設(shè)置折線圖外觀樣式
1.設(shè)置交互樣式
self.LineChartView.scaleYEnabled = NO;//取消Y軸縮放 self.LineChartView.doubleTapToZoomEnabled = NO;//取消雙擊縮放 self.LineChartView.dragEnabled = YES;//啟用拖拽圖標(biāo) self.LineChartView.dragDecelerationEnabled = YES;//拖拽后是否有慣性效果 self.LineChartView.dragDecelerationFrictionCoef = 0.9;//拖拽后慣性效果的摩擦系數(shù)(0~1),數(shù)值越小,慣性越不明顯
2.設(shè)置X軸樣式
ChartXAxis *xAxis = self.LineChartView.xAxis; xAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale;//設(shè)置X軸線寬 xAxis.labelPosition = XAxisLabelPositionBottom;//X軸的顯示位置,默認(rèn)是顯示在上面的 xAxis.drawGridLinesEnabled = NO;//不繪制網(wǎng)格線 xAxis.spaceBetweenLabels = 4;//設(shè)置label間隔 xAxis.labelTextColor = [self colorWithHexString:@"#057748"];//label文字顏色
3.設(shè)置Y軸樣式
self.LineChartView.rightAxis.enabled = NO;//不繪制右邊軸 ChartYAxis *leftAxis = self.LineChartView.leftAxis;//獲取左邊Y軸 leftAxis.labelCount = 5;//Y軸label數(shù)量,數(shù)值不一定,如果forceLabelsEnabled等于YES, 則強(qiáng)制繪制制定數(shù)量的label, 但是可能不平均 leftAxis.forceLabelsEnabled = NO;//不強(qiáng)制繪制指定數(shù)量的label leftAxis.showOnlyMinMaxEnabled = NO;//是否只顯示最大值和最小值 leftAxis.axisMinValue = 0;//設(shè)置Y軸的最小值 leftAxis.startAtZeroEnabled = YES;//從0開(kāi)始繪制 leftAxis.axisMaxValue = 105;//設(shè)置Y軸的最大值 leftAxis.inverted = NO;//是否將Y軸進(jìn)行上下翻轉(zhuǎn) leftAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale;//Y軸線寬 leftAxis.axisLineColor = [UIColor blackColor];//Y軸顏色 leftAxis.valueFormatter = [[NSNumberFormatter alloc] init];//自定義格式 leftAxis.valueFormatter.positiveSuffix = @" $";//數(shù)字后綴單位 leftAxis.labelPosition = YAxisLabelPositionOutsideChart;//label位置 leftAxis.labelTextColor = [self colorWithHexString:@"#057748"];//文字顏色 leftAxis.labelFont = [UIFont systemFontOfSize:10.0f];//文字字體
4.設(shè)置網(wǎng)格線樣式
主要是設(shè)置Y軸的網(wǎng)格線樣式, 代碼如下:
leftAxis.gridLineDashLengths = @[@3.0f, @3.0f];//設(shè)置虛線樣式的網(wǎng)格線 leftAxis.gridColor = [UIColor colorWithRed:200/255.0f green:200/255.0f blue:200/255.0f alpha:1];//網(wǎng)格線顏色 leftAxis.gridAntialiasEnabled = YES;//開(kāi)啟抗鋸齒
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(jié)軸上 leftAxis.drawLimitLinesBehindDataEnabled = YES;//設(shè)置限制線繪制在折線圖的后面
6.設(shè)置折線圖描述及圖例樣式
當(dāng)有多條折線顯示在圖表上時(shí), 通常需要一個(gè)'圖例'來(lái)說(shuō)明每一條折線的名稱或者代表的含義, 這時(shí)候就要進(jìn)行圖例的設(shè)置, 主要代碼如下:
[self.LineChartView setDescriptionText:@"折線圖"];//折線圖描述 [self.LineChartView setDescriptionTextColor:[UIColor darkGrayColor]]; self.LineChartView.legend.form = ChartLegendFormLine;//圖例的樣式 self.LineChartView.legend.formSize = 30;//圖例中線條的長(zhǎng)度 self.LineChartView.legend.textColor = [UIColor darkGrayColor];//圖例文字顏色
除了可以用以上這些屬性來(lái)設(shè)置樣式以外, 還有其它很多屬性, 可以自行嘗試. 由于以上這些屬性較簡(jiǎn)單, 從屬性名就可以看出其含義, 而且在代碼后面也大都有注釋, 在這里就不對(duì)這些屬性作一一解釋了.
三、為折線圖提供數(shù)據(jù)
為折線圖提供數(shù)據(jù), 和柱形圖差不多, 唯一不同的是設(shè)置折線圖的折線線條樣式, 在設(shè)置線條樣式時(shí), 我們可以設(shè)置折線的類型, 有階梯類型和一般類型. 我們也可以設(shè)置折線拐點(diǎn)的樣式, 拐點(diǎn)的大小, 拐點(diǎn)是否可以是空心類型等. 此外還可以對(duì)折線圖進(jìn)行顏色填充, 以此來(lái)美化圖表. 由于樣式太多, 在這里就不多說(shuō)了, 直接看代碼:
- (LineChartData *)setData{
int xVals_count = 12;//X軸上要顯示多少條數(shù)據(jù)
double maxYVal = 100;//Y軸的最大值
//X軸上面需要顯示的數(shù)據(jù)
NSMutableArray *xVals = [[NSMutableArray alloc] init];
for (int i = 0; i < xVals_count; i++) {
[xVals addObject:[NSString stringWithFormat:@"%d月", i+1]];
}
//對(duì)應(yīng)Y軸上面需要顯示的數(shù)據(jù)
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{
//創(chuàng)建LineChartDataSet對(duì)象
set1 = [[LineChartDataSet alloc] initWithYVals:yVals label:@"lineName"];
//設(shè)置折線的樣式
set1.lineWidth = 1.0/[UIScreen mainScreen].scale;//折線寬度
set1.drawValuesEnabled = YES;//是否在拐點(diǎn)處顯示數(shù)據(jù)
set1.valueColors = @[[UIColor brownColor]];//折線拐點(diǎn)處顯示數(shù)據(jù)的顏色
[set1 setColor:[self colorWithHexString:@"#007FFF"]];//折線顏色
set1.drawSteppedEnabled = NO;//是否開(kāi)啟繪制階梯樣式的折線圖
//折線拐點(diǎn)樣式
set1.drawCirclesEnabled = NO;//是否繪制拐點(diǎn)
set1.circleRadius = 4.0f;//拐點(diǎn)半徑
set1.circleColors = @[[UIColor redColor], [UIColor greenColor]];//拐點(diǎn)顏色
//拐點(diǎn)中間的空心樣式
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];//賦值填充顏色對(duì)象
CGGradientRelease(gradientRef);//釋放gradientRef
//點(diǎn)擊選中拐點(diǎn)的交互樣式
set1.highlightEnabled = YES;//選中拐點(diǎn),是否開(kāi)啟高亮效果(顯示十字線)
set1.highlightColor = [self colorWithHexString:@"#c83c23"];//點(diǎn)擊選中拐點(diǎn)的十字線的顏色
set1.highlightLineWidth = 1.0/[UIScreen mainScreen].scale;//十字線寬度
set1.highlightLineDashLengths = @[@5, @5];//十字線的虛線樣式
//將 LineChartDataSet 對(duì)象放入數(shù)組中
NSMutableArray *dataSets = [[NSMutableArray alloc] init];
[dataSets addObject:set1];
//添加第二個(gè)LineChartDataSet對(duì)象
// 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];
//創(chuàng)建 LineChartData 對(duì)象, 此對(duì)象就是lineChartView需要最終數(shù)據(jù)對(duì)象
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];
//自定義數(shù)據(jù)顯示格式
[formatter setNumberStyle:NSNumberFormatterDecimalStyle];
[formatter setPositiveFormat:@"#0.0"];
[data setValueFormatter:formatter];
return data;
}
}
代理方法和其他圖表一樣,這里就不再贅述了.
運(yùn)行結(jié)果如下:

運(yùn)行結(jié)果
為折線圖提供數(shù)據(jù)的用到的是LineChartData類創(chuàng)建的對(duì)象, 在LineChartData對(duì)象初始化時(shí), 需要提供dataSets數(shù)組(里面放的是LineChartDataSet對(duì)象), 上面的例子中dataSets數(shù)組中只有一個(gè)LineChartDataSet對(duì)象, 也就是只有一條折線, 我們也可以在dataSets數(shù)組中放入多個(gè)LineChartDataSet對(duì)象, 也就是多條曲線, 下面的結(jié)果就是添加2條折線的效果, 如下圖:

多條折線的折線圖
Demo 下載地址: http://xiazai.jb51.net/201612/yuanma/LineChartDemo-master_jb51.rar
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
iOS中的實(shí)時(shí)遠(yuǎn)程配置全紀(jì)錄
這篇文章主要給大家介紹了關(guān)于iOS中實(shí)時(shí)遠(yuǎn)程配置的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)各位iOS開(kāi)發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
iOS利用CALayer實(shí)現(xiàn)動(dòng)畫(huà)加載的效果
網(wǎng)上關(guān)于動(dòng)畫(huà)加載的效果大多每一個(gè)圓圈都是使用UIView,因?yàn)檫@種容易控制,但是這里用的是CALayer,文中給出了詳細(xì)的實(shí)現(xiàn)示例代碼,相信會(huì)對(duì)大家的學(xué)習(xí)和理解很有幫助,感興趣的朋友們下面來(lái)一起看看吧。2016-10-10
iOS實(shí)現(xiàn)文件切片儲(chǔ)存并且上傳(仿斷點(diǎn)續(xù)傳機(jī)制)
這篇文章主要給大家介紹了關(guān)于iOS實(shí)現(xiàn)文件切片儲(chǔ)存并上傳仿斷點(diǎn)續(xù)傳機(jī)制的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
iOS 中根據(jù)屏幕寬度自適應(yīng)分布按鈕的實(shí)例代碼
這篇文章主要介紹了iOS 中根據(jù)屏幕寬度自適應(yīng)分布按鈕的實(shí)例代碼,本文給大家分享兩種方式,代碼簡(jiǎn)單易懂,需要的朋友可以參考下2016-11-11
IOS 聊天界面(自適應(yīng)文字)的實(shí)現(xiàn)
本文主要介紹一個(gè)實(shí)現(xiàn)聊天界面的思路過(guò)程,具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
IOS 中 new 和 alloc init 的對(duì)比
這篇文章主要介紹了IOS 中 new 和 alloc init 的區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-02-02
iOS App設(shè)計(jì)模式開(kāi)發(fā)之適配器模式使用的實(shí)戰(zhàn)演練
這篇文章主要介紹了iOS App設(shè)計(jì)模式開(kāi)發(fā)之適配器模式的使用實(shí)例,示例代碼為傳統(tǒng)的Objective-C語(yǔ)言,需要的朋友可以參考下2016-03-03

