最近公司項目中要加一個折線圖的需求因為是金融項目考慮到后期可能會有大量的餅狀和折線圖的需求，仔細搜索一番覺得用個成熟的charts框架會比較好，最終決定用Charts，話不多說把自己踩過的坑放上來自己也做個筆記。

Charts? ?github地址：https://github.com/danielgindi/Charts

折線圖：

Charts集成

導入charst框架，創建橋接文件

因為我的項目是oc編寫，Charts是swift編寫，首先得創建橋接文件

1、用的cocoapods客戶端，直接上手導入charts框架

2、創建oc與swift橋接文件

任意創建一個swift的類點擊finish，再點擊Create Bridging Header，然后會發現項目中有了XXX-Bridging-Header類，在此類中引入頭文件@import Charts。最后在Build Settings中將Swift Language Version選為4.0，為了后面我們的氣泡使用。

Charts使用

1、ViewController導入頭文件，導入Delegate<IChartAxisValueFormatter,IChartValueFormatter>

2、創建折線圖

- (void)initLineChartView{

????//創建折線圖

????_linechartView =? [[LineChartViewalloc]init];

????_linechartView.frame = CGRectMake(10, 60, ScreenWidth - 20, 260);

????_linechartView.legend.form = ChartLegendFormNone; ? //說明圖標 ? ? ????_linechartView.dragEnabled = NO;? ? ? //拖動手勢 ? ? ????_linechartView.pinchZoomEnabled = NO;? ? ? //捏合手勢 ? ? ????_linechartView.rightAxis.enabled = NO;? ? ? //隱藏右Y軸 ? ? ????_linechartView.chartDescription.enabled = NO;? ? ? //不顯示描述label ? ? ????_linechartView.doubleTapToZoomEnabled = NO;? ? ? //禁止雙擊縮放? ????_linechartView.drawGridBackgroundEnabled = NO; ? ? ????_linechartView.drawBordersEnabled? ? ? ? = NO; ?

????? _linechartView.dragEnabled ? ? ? ? ? ? ? = YES; ? ? //拖動氣泡

? ? [_linechartView animateWithXAxisDuration:2.20 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? easingOption:ChartEasingOptionEaseOutBack];? ?//加載動畫時長

? [self.view addSubview:_linechartView];

}

3、y軸，x軸

- (void)initLineChartViewWithLeftaxisMaxValue:(double)maxValue MinValue:(double)minValue{

????//氣泡

????BalloonMarker*marker = [[BalloonMarkeralloc]initWithColor:[UIColororangeColor]font: [UIFontsystemFontOfSize:10]textColor:UIColor.whiteColorinsets:UIEdgeInsetsMake(9.0,8.0,20.0,8.0)];

????marker.bubbleImg =? [UIImageimageNamed:@"chartqipaoBubble"];

????marker.chartView = _linechartView;

????marker.minimumSize = CGSizeMake(50.f,25.f);

????_linechartView.marker = marker;

????//設置左Y軸

????ChartYAxis*leftAxis = _linechartView.leftAxis;[leftAxisremoveAllLimitLines];

????leftAxis.axisMaxValue =? maxValue; ????//設置Y軸的最大值

????leftAxis.axisMinValue = 0.00;????//設置Y軸的最小值

????leftAxis.axisLineWidth = 1;

????leftAxis.labelCount=5; ????//y軸展示多少個

????labelleftAxis.labelFont = [UIFontsystemFontOfSize:12];

????leftAxis.labelTextColor = [UIColorlightGrayColor];

????leftAxis.axisLineColor = [UIColorlightGrayColor];????//左Y軸線條顏色

????leftAxis.gridColor = [UIColorlightGrayColor];

????leftAxis.zeroLineColor = [UIColorlightGrayColor];????//左Y軸底線條顏色

????leftAxis.drawZeroLineEnabled = YES;

????leftAxis.drawLimitLinesBehindDataEnabled = YES;

????// 設置X軸

????ChartXAxis*xAxis =_linechartView.xAxis;

????xAxis.axisLineColor = [UIColorlightGrayColor];

????xAxis.labelPosition =? XAxisLabelPositionBottom;

????xAxis.labelFont = [UIFontsystemFontOfSize:12];

????xAxis.labelTextColor = [UIColorlightGrayColor];

????xAxis.axisMinValue = -0.3; ????// label間距

????xAxis.granularity = 1.0;

????xAxis.drawAxisLineEnabled = NO;????//是否畫x軸線

????xAxis.drawGridLinesEnabled = NO;????//是否畫網格

}

4、數據

- (void)initLineChartDataWithXvalueArr:(NSArray*)xValueArr YvlueArr:(NSArray*)yValueArr{

????_xValueArr = xValueArr;????// 設置x軸折線數據 （模擬數據）

????_yValueArr = yValueArr;????// 設置y軸折線數據 （模擬數據）

????_chart_YmaxValue = [[_yValueArrvalueForKeyPath:@"@max.doubleValue"]doubleValue];????//最大值

????_chart_YminValue = [[_yValueArrvalueForKeyPath:@"@min.doubleValue"]doubleValue];? ? ?//最小值

????if(_chart_YmaxValue<0.03&& (_chart_YminValue==_chart_YmaxValue)){

????????_scale = 10;

????}else if(_chart_YminValue==_chart_YmaxValue){

????????_scale = 2;

????}else{

????????_scale = 1;

}

????[selfinitLineChartViewWithLeftaxisMaxValue:_chart_YmaxValueMinValue:_chart_YminValue]; //引入

????//chartView設置X軸數據（日期）

????if(_xValueArr.count>0) {

????_linechartView.xAxis.axisMaxValue = (double)xValueArr.count-1+0.3;

????_linechartView.xAxis.valueFormatter =? [[ChartIndexAxisValueFormatteralloc]initWithValues:xValueArr];

}

? ? // 創建數據集數組

????NSMutableArray*dataSets = [[NSMutableArrayalloc]init];

????LineChartDataSet*set = [selfdrawLineWithArr:yValueArrtitle:nilcolor:[UIColororangeColor]];

????if(set) {

????????[dataSetsaddObject:set];????// 賦值數據集數組

????}

????LineChartData*data = [[LineChartDataalloc]initWithDataSets:dataSets];

????_linechartView.data = data;

}

5、delegate調用，IChartValueFormatter delegate，根據數據數組 title color 創建折線set

- (LineChartDataSet *)drawLineWithArr:(NSArray *)arr title:(NSString *)title color:(UIColor *)color { ??

? ? ? if (arr.count == 0) { ? ? ? ?

????????return nil; ? ?

????} ? ?

????// 處理折線數據?

????NSMutableArray *statistics = [NSMutableArray array]; ?

????double leftAxisMin = 0; ? ?

????double leftAxisMax = 0; ? ?

????for (int i = 0; i < arr.count; i++) { ?? ?

? ? ? ? ? ?NSString *num = arr[i]; ? ? ? ?

? ? ? ? ? ?double temp ? = [num doubleValue];? ? ?

? ? ? ?????double value? = [self roundFloat:temp];? ? ? ??

? ? ? ?????leftAxisMax ? = MAX(value, leftAxisMax); ? ? ?

? ? ? ?????leftAxisMin ? = MIN(value, leftAxisMin); ? ? ?

? ? ? ? ? ?[statistics addObject:[[ChartDataEntry alloc] initWithX:i y:value]]; ?

????? } ?? ? ?? ? ? ?

????CGFloat topNum = leftAxisMax * (5.0/4.0); ??

?????if (leftAxisMax ==? leftAxisMin) { ??

?????????????_linechartView.leftAxis.axisMaxValue = 10; ?

? }else{ ?? ? ? ? ? ? ?

? ? ? ? ? ? _linechartView.leftAxis.axisMaxValue = topNum * _scale; ?

? } ?? ? ?? ? ?

????? if (leftAxisMin < 0) { ?

????? ? ? CGFloat minNum = leftAxisMin * (5.0/4.0); ?

????? ? ? _linechartView.leftAxis.axisMinValue = minNum ; ?

????? } ?? ? ?? ? ? ?

? ? ? ?// 設置Y軸數據 ?

? ????_linechartView.leftAxis.valueFormatter = self; //需要遵IChartAxisValueFormatter協議 ? ?

????// 設置折線數據 ?

????? LineChartDataSet *chartDataSet? = nil; ?

????? chartDataSet = [[LineChartDataSet alloc] initWithValues:statistics label:title]; ? ?

? ? ? [chartDataSet setColor:color];????? //折線顏色 ?? ? ? ?

? ? ?chartDataSet.valueFont = [UIFont systemFontOfSize:12]; ? ? //折線字體大小? ? ? ? ? ? ? ? ?

? ? ?chartDataSet.valueFormatter = self;? ?//需要遵循IChartValueFormatter協議 ? ?

? ? ? chartDataSet.lineWidth = 1.0f;????//折線寬度 ?

????? chartDataSet.valueColors = @[color];???? //折線拐點處顯示數據的顏色 ? ?

? ? ? chartDataSet.drawCirclesEnabled = NO;????//是否繪制拐點 ? ?

? ? ? chartDataSet.axisDependency = AxisDependencyLeft;???? //軸線方向 ?

? ????chartDataSet.highlightColor = [UIColor clearColor];????//選中線條顏色 ? ?

? ? ? chartDataSet.highlightLineWidth = 1.00f; ? ?

? ? ? chartDataSet.drawCircleHoleEnabled = YES;?????//是否繪制中間的空心 ? ?

? ? ? // chartDataSet.circleHoleRadius = 2.0f;???? //空心的半徑 ?

? ????// chartDataSet.circleHoleColor = WKOrangeColor;???? //空心的顏色 ?? ?

? ? ?chartDataSet.drawFilledEnabled = YES;//是否填充顏色 ?

? ? ?NSArray *gradientColors = @[(id)[ChartColorTemplates colorFromString:@"#ffffff"].CGColor, ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (id)[ChartColorTemplates colorFromString:@"#f9511e"].CGColor]; ? ?

????CGGradientRef gradientRef = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil); ?

? ? chartDataSet.fillAlpha = 0.7f;//透明度 ? ?

? ? chartDataSet.fill = [ChartFill fillWithLinearGradient:gradientRef angle:90.0f]; //賦值填充顏色對象 ? ?

? ? CGGradientRelease(gradientRef); ?? ? ?

? ? ?return chartDataSet;

}

#pragma mark - IChartValueFormatter delegate (折線值)

- (NSString *)stringForValue:(double)value entry:(ChartDataEntry *)entry dataSetIndex:(NSInteger)dataSetIndex viewPortHandler:(ChartViewPortHandler *)viewPortHandler { ?? ? ? ?

????return nil; ? ?

????// return [NSString stringWithFormat:@"%@", value];

}

#pragma mark - IChartAxisValueFormatter delegate (y軸值) (x軸的值寫在DateValueFormatter類里, 都是這個協議方法)

- (NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis { ?? ? ?

????? if (ABS(value) > 1000) { ? ? ? ?

????????return [NSString stringWithFormat:@"%.1fk", value/(double)1000]; ? ?

} ?? ? ? ?

????????return [NSString stringWithFormat:@"%0.2f", value];

}

6、ViewController調用

關于氣泡

從github上下載charts源碼，從里邊找到BalloonMarker的類然后add進自己的項目里，我的氣泡是UI給的圖，所以還需要在BalloonMarker里修改下（前面已經將工程中swift版本設置為4.0版本，不然BalloonMarker里的NSAttributedStringKey會報錯）

初始化Chart默認選中位置顯示氣泡

//默認選中氣泡

? ? NSString *lastValue = _yValueArr.lastObject; ?

????? [_linechartView highlightValueWithX:_xValueArr.count-1? y:[lastValue doubleValue]? dataSetIndex:0 callDelegate:NO];

根據需求找到圖片紅框內的代碼行數自行修改即可

最后，這只是charts其中的一個折線功能使用，里邊還有K線圖、泡泡圖、雷達圖、柱狀圖等等，還可混合成復合圖表如炒股的盯盤圖表，就不一一表述了，網上也有很多資料可自行查找