OC 項(xiàng)目中遇到了折線圖互妓，使用了第三方庫 Charts，Charts 是用 Swift 實(shí)現(xiàn)的，因此如果是 OC 項(xiàng)目的話冯勉，還需要對(duì) Xcode 進(jìn)行一些設(shè)置澈蚌，這里簡單介紹下，從集成 Charts 到繪制出折線圖灼狰。
先貼出效果圖宛瞄，demo 地址在最底部：
折線圖
實(shí)現(xiàn)步驟如下：
1. 首先創(chuàng)建一個(gè) OC 項(xiàng)目，然后用 pod 安裝 Charts交胚，或者直接把 Charts 拉進(jìn)項(xiàng)目份汗，簡單起見，我這里直接將下載好的 Charts.xcodeproj 拉進(jìn)項(xiàng)目蝴簇，如下圖:
記得要把三方庫拉進(jìn) Embedded Binaries杯活，如下圖：
2. 接著將項(xiàng)目的 PROJECT 以及 TARGETS 內(nèi)的 Swift Language Version 改成可用的版本，我這邊 Xcode 版本號(hào)10.1熬词，可用的 Swift 版本有3旁钧、4、4.2互拾。
不要忘記拉進(jìn)來的三方庫Charts.xcodeproj 內(nèi)的 PROJECT 以及 TARGETS的 Swift Language Version 也要更改成和上面的一樣歪今，不然會(huì)報(bào)錯(cuò)。
3. 創(chuàng)建一個(gè)橋接文件颜矿，格式是項(xiàng)目名-Bridging-Header.h寄猩，在橋接文件里導(dǎo)入 Charts，@import Charts;骑疆。接著在需要用到折線圖的類里面導(dǎo)入項(xiàng)目名-Bridging-Header.h即可田篇。
接下來就可以使用 Charts 滿足我們的業(yè)務(wù)需要了。
1. 創(chuàng)建折線圖并設(shè)置其基本樣式：
self.lineChartView = [[LineChartView alloc] init];
self.lineChartView.delegate = self;//設(shè)置代理
[self.view addSubview:self.lineChartView];
// 基本樣式
self.lineChartView.backgroundColor = [UIColor colorWithRed:230/255.0f green:253/255.0f blue:253/255.0f alpha:1];
self.lineChartView.noDataText = @"暫無數(shù)據(jù)";
// 交互樣式
self.lineChartView.scaleYEnabled = NO; // 取消Y軸縮放
self.lineChartView.scaleXEnabled = NO; // 取消X軸縮放
self.lineChartView.pinchZoomEnabled = NO; // 取消XY軸同時(shí)縮放
self.lineChartView.doubleTapToZoomEnabled = NO; // 取消雙擊縮放
self.lineChartView.legend.enabled = NO;// 不顯示圖例說明
self.lineChartView.dragEnabled = YES; // 啟用拖拽圖表
self.lineChartView.dragDecelerationEnabled = YES; // 拖拽后是否有慣性效果
self.lineChartView.dragDecelerationFrictionCoef = 0.9; // 拖拽后慣性效果的摩擦系數(shù)(0~1)封断，數(shù)值越小，慣性越不明顯
// X軸樣式
ChartXAxis *xAxis = self.lineChartView.xAxis;
xAxis.axisLineWidth = 1.0; // 設(shè)置X軸線寬
xAxis.labelPosition = XAxisLabelPositionBottom; // X軸的顯示位置舶担，默認(rèn)是顯示在上面的
xAxis.drawGridLinesEnabled = NO; // 不繪制網(wǎng)格線
xAxis.labelTextColor = [self colorWithHexString:@"#057748"];//label文字顏色
DateValueFormatter *valueFormatter = [[DateValueFormatter alloc] init];//坐標(biāo)數(shù)值樣式
xAxis.valueFormatter = valueFormatter;
// Y軸樣式
self.lineChartView.rightAxis.enabled = NO;//不繪制右邊軸
ChartYAxis *leftAxis = self.lineChartView.leftAxis;//獲取左邊Y軸
leftAxis.labelCount = 2; // Y軸label數(shù)量坡疼，數(shù)值不一定，如果forceLabelsEnabled等于YES, 則強(qiáng)制繪制制定數(shù)量的label, 但是可能不平均
leftAxis.forceLabelsEnabled = NO; // 不強(qiáng)制繪制指定數(shù)量的label
leftAxis.axisMinimum = 0; // 設(shè)置Y軸的最小值
leftAxis.drawZeroLineEnabled = YES;
leftAxis.axisMaximum = 120; // 設(shè)置Y軸的最大值
leftAxis.inverted = NO; // 是否將Y軸進(jìn)行上下翻轉(zhuǎn)
leftAxis.axisLineWidth = 1.0/[UIScreen mainScreen].scale; // Y軸線寬
leftAxis.axisLineColor = [UIColor blackColor]; // Y軸顏色
leftAxis.labelPosition = YAxisLabelPositionOutsideChart; // label位置
leftAxis.labelTextColor = [self colorWithHexString:@"#057748"]; // 文字顏色
leftAxis.labelFont = [UIFont systemFontOfSize:10.0f]; // 文字字體
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; // 開啟抗鋸齒
2. 添加限制線
// 添加限制線
ChartLimitLine *limitLine = [[ChartLimitLine alloc] initWithLimit:100 label:@""];
limitLine.lineWidth = 1;
limitLine.lineColor = [self colorWithHexString:@"#c83c23"]; // 限制線顏色
limitLine.lineDashLengths = @[@5.0f, @5.0f]; // 虛線樣式
limitLine.labelPosition = ChartLimitLabelPositionTopRight; // 位置
// limitLine.valueTextColor = [self colorWithHexString:@"#057748"];//label文字顏色
// limitLine.valueFont = [UIFont systemFontOfSize:12];//label字體
[leftAxis addLimitLine:limitLine];//添加到Y(jié)軸上
leftAxis.drawLimitLinesBehindDataEnabled = YES;//設(shè)置限制線繪制在折線圖的后面
3. 添加描述及圖例樣式衣陶，這個(gè)可有可無柄瑰，一般顯示在右下角或左下角
//描述及圖例樣式
ChartDescription *description = [[ChartDescription alloc] init];
description.text = @"折線圖";
description.textColor = [UIColor darkGrayColor];
[self.lineChartView setChartDescription:description];
self.lineChartView.legend.form = ChartLegendFormLine;
self.lineChartView.legend.formSize = 30;
self.lineChartView.legend.textColor = [UIColor darkGrayColor];
4. 添加氣泡效果，BalloonMarker 是 Charts 中的一個(gè)類文件剪况，直接拉進(jìn)來即可
// 顯示氣泡效果
BalloonMarker *marker = [[BalloonMarker alloc]
initWithColor: [UIColor colorWithWhite:0/255. alpha:0.7]
font: [UIFont boldSystemFontOfSize:10.0]
textColor: UIColor.whiteColor
insets: UIEdgeInsetsMake(2, 0, 0, 0)];
marker.chartView = _lineChartView;
marker.arrowSize = CGSizeMake(10, 10);
// marker.color = [UIColor greenColor];
marker.minimumSize = CGSizeMake(40, 30);
marker.chartView = _lineChartView;
_lineChartView.marker = marker;
5. 設(shè)置數(shù)據(jù)(可以根據(jù)業(yè)務(wù)需要設(shè)置是否需要漸變填充教沾，是否需要曲線，需要顯示多少數(shù)據(jù)等)
NSMutableArray *yVals1 = [[NSMutableArray alloc] init];
int count = 11;//X軸上要顯示多少條數(shù)據(jù)
double range = 50;//Y軸的值
for (int i = 8; i < 8+count; i++) {
double mult = (range + 1);
double val = (double) (arc4random_uniform(mult)) + 20;
[yVals1 addObject:[[ChartDataEntry alloc] initWithX:i y:val]];
}
LineChartDataSet *set1 = nil;
if (_lineChartView.data.dataSetCount > 0) {
set1 = (LineChartDataSet *)_lineChartView.data.dataSets[0];
[set1 replaceEntries:yVals1];
[_lineChartView.data notifyDataChanged];
[_lineChartView notifyDataSetChanged];
} else {
set1 = [[LineChartDataSet alloc] initWithEntries:yVals1 label:@"lineName"];
// 曲線模式
set1.mode = LineChartModeCubicBezier;
set1.cubicIntensity = 0.2; // 曲線弧度
set1.lineWidth = 1.0;
set1.circleRadius = 4.0;
// 拐點(diǎn)
set1.drawCirclesEnabled = NO; // 是否繪制拐點(diǎn)
set1.drawValuesEnabled = NO;//是否在拐點(diǎn)處顯示數(shù)據(jù)
set1.drawCircleHoleEnabled = YES;//是否繪制中間的空心
set1.circleHoleRadius = 2.0f;//空心的半徑
set1.circleHoleColor = [UIColor blackColor];//空心的顏色
[set1 setCircleColor:UIColor.yellowColor];
set1.highlightColor = [UIColor colorWithRed:244/255.f green:117/255.f blue:117/255.f alpha:1.f];
// 單純的顏色填充
// [set1 setColor:UIColor.redColor];
// set1.fillColor = UIColor.blueColor;
// set1.fillAlpha = 0.1;
// set1.drawFilledEnabled = YES;
// 漸變色顏色填充
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.8f; //透明度
set1.fill = [ChartFill fillWithLinearGradient:gradientRef angle:90.0f]; //賦值填充顏色對(duì)象
CGGradientRelease(gradientRef); // 釋放gradientRef
// 點(diǎn)擊選中拐點(diǎn)的交互樣式
set1.highlightEnabled = YES; // 選中拐點(diǎn),是否開啟高亮效果(顯示十字線)
set1.highlightColor = [self colorWithHexString:@"#c83c23"];//點(diǎn)擊選中拐點(diǎn)的十字線的顏色
set1.highlightLineWidth = 1.0;//十字線寬度
set1.highlightLineDashLengths = @[@5, @5];//十字線的虛線樣式
set1.drawHorizontalHighlightIndicatorEnabled = NO;
set1.fillFormatter = [[CubicLineSampleFillFormatter alloc] init];
LineChartData *data = [[LineChartData alloc] initWithDataSet:set1];
[data setValueFont:[UIFont fontWithName:@"HelveticaNeue-Light" size:9.f]];
[data setDrawValues:NO];
_lineChartView.data = data;
}
