前幾天把AAChartsKit的使用簡單寫了寫，官方使用說明已經寫的很詳細了。我也就不多說了，今天就講講Charts的使用。
0.簡介
近期項目需要使用到折線圖這樣的圖表功能，因此接觸到了Charts這個框架，不得不說這個圖表框架很強大，但是在GitHub上Charts的介紹也比較簡單的介紹（直說了和MPAndroidChart類似，大部分使用方法一致），就寫寫自己的一點心得供大家參考。
Charts使用swift編寫，它是仿照MPAndroidChart實現的。所以在安卓和iOS上可以實現一致的效果。如果你們的APP想在兩端實現統一的效果，就可以使用這個圖標庫。
廢話不多說了。開始講解使用方法吧。
1.導入三方庫
charts支持cocoapods導入，這就對大多數開發者比較方便了。但是就是使用cocoapdos也需要注意些地方。
由於charts使用swift編寫，在swift編寫的項目中使用比較方便，在這篇文章中就不詳細描述了。但是現如今還是有很多項目使用oc編寫，就如我的這個項目。這就需要了解一些oc和swift的橋接了。這就需要看別的文章了。回歸正題，開始講cocoapdos的導入吧。
（1）podfile的設置
（2）將工程中Pods的編譯語言設置為SWIFT最新版本
build Settings ->Swift Language Version 改為最新版本
（3）將Chart.framework添加到新建的項目中
點擊新建的項目->Build Phases->Link Binary With Libraries-> "+" -> 找到Charts.frame添加
（4）添加OC與Switf橋接
在工程中新建一個Swift文件，名字隨便取，如"Chart-Bridging-Header.h"，這時候會提示是否建立橋接文件，直接選Create Bridging Header選項，名字無所謂，會自動建立一個橋接文件。在橋接文件里寫入@import Charts;
到了這一步，導入就完成了。你就可以在自己的項目使用。
2.使用
設置Chatview的屬性
（1）scale屬性
顧名思義，就是圖標是否支持拖拽,scaleYEnabled = YES即縱坐標支持拖拽，scaleXEnabled = YES即橫坐標支持拖拽。
（2）chartDescription屬性
打開這個屬性，你的圖表上將會有關於你的圖標的描述。
（3）pinchZoomEnabled
是否支持X軸、Y軸同時縮放，如果是YES ，則代表支持同時縮放。
（4）maxVisibleCount
這個屬性是控制圖標上的數字展示的最大個數的，如果你的圖標不想顯示上面的數字，就可以把maxVisibleCount屬性設置為0。
（5）legend
這個Bool屬性是設置要不要顯示圖例的，看到上圖底部的"-- DataSet 1"了嗎，如果你不想要顯示這一欄，就把legend.enabled設置為NO。
（6）noDataText
沒有數據的時候ChartsView上需要顯示什么文字。chartsView中有三個重要的屬性需要開發者去設置，那就是leftAxis(左軸)，rightAxis（右軸），xAxis（X軸）。
（7）doubleTapToZoomEnabled
是否允許雙擊縮放。
（8）delegate
代理，大家都懂的。對應的protocal有4個，都是可選選項
//圖表中的數值被選中 - (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView entry:(ChartDataEntry * _Nonnull)entry highlight:(ChartHighlight * _Nonnull)highlight; //圖表中的空白區域被點擊 - (void)chartValueNothingSelected:(ChartViewBase * _Nonnull)chartView; //圖表縮放 - (void)chartScaled:(ChartViewBase * _Nonnull)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY; //圖標被移動 - (void)chartTranslated:(ChartViewBase * _Nonnull)chartView dX:(CGFloat)dX dY:(CGFloat)dY;
Axis屬性
（1）enabled
設置為NO的話，則對應的坐標軸不顯示。
（2）labelPosition
表示左軸坐標的位置，有2個選項:YAxisLabelPositionOutsideChart = 0,YAxisLabelPositionInsideChart = 1,坐標顯示在軸內或者是軸外。
（3）labelCount
即在坐標軸上最多顯示多少個坐標點
（4）drawGridBackgroundEnabled
是否要畫網格線
（5）gridLineDashLengths
gridLineDashLengths = @[@2.f, @5.f]即線段寬為2.0f，空格寬為5.0f。
舉個例子：
LineChartView *lineChartView = [[LineChartView alloc] init]; [self.view addSubview:lineChartView]; self.lineChartView = lineChartView; lineChartView.doubleTapToZoomEnabled = NO;//禁止雙擊縮放 有需要可以設置為YES lineChartView.gridBackgroundColor = [UIColor clearColor];//表框以及表內線條的顏色以及隱藏設置 根據自己需要調整 lineChartView.borderColor = [UIColor clearColor]; lineChartView.drawGridBackgroundEnabled = NO; lineChartView.drawBordersEnabled = NO; lineChartView.descriptionText = @"XXX";//該表格的描述名稱 lineChartView.descriptionTextColor = [UIColor whiteColor];//描述字體顏色 lineChartView.legend.enabled = YES;//是否顯示折線的名稱以及對應顏色 多條折線時必須開啟 否則無法分辨 lineChartView.legend.textColor = [UIColor whiteColor];//折線名稱字體顏色 //設置動畫時間 [lineChartView animateWithXAxisDuration:1]; //設置縱軸坐標顯示在左邊而非右邊 rightAxis = lineChartView.rightAxis; rightAxis.drawGridLinesEnabled = NO; leftAxis = lineChartView.leftAxis; leftAxis.drawGridLinesEnabled = NO; leftAxis.labelTextColor = [UIColor whiteColor]; //設置橫軸坐標顯示在下方 默認顯示是在頂部 xAxis = lineChartView.xAxis; xAxis.labelPosition = XAxisLabelPositionBottom; xAxis.labelTextColor = [UIColor whiteColor]; xAxis.labelCount = 3;
3.設置完屬性后，就是填充數據了
在這里我僅以折線圖表為例。
我們先介紹兩個概念:set和data,LineChartData就是折線圖的data類，它可以由很多組set組成，一組就是一條折線。因此我們可以定義set的屬性，從而繪制各種各樣的折線。示例如下:
//是否繪制圖標 set1.drawIconsEnabled = NO; //折線顏色 [set1 setColor:UIColor.blackColor]; //折線點的顏色 [set1 setCircleColor:UIColor.blackColor]; //折線的寬度 set1.lineWidth = 1.0; //折線點的寬度 set1.circleRadius = 3.0; //是否畫空心圓 set1.drawCircleHoleEnabled = NO; //折線點的值的大小 set1.valueFont = [UIFont systemFontOfSize:9.f]; //圖例的線寬 set1.formLineWidth = 1.0; //圖例的字體大小 set1.formSize = 15.0;
開始填充
//定義一個數組承接數據 //對應Y軸上面需要顯示的數據 NSMutableArray *yVals = [[NSMutableArray alloc] init]; for (int i = 0; i < self.financeLineDotDataList.count; i++) { BTCTrenddata *dotData = (BTCTrenddata *)[self.financeLineDotDataList objectAtIndex:i]; //將橫縱坐標以ChartDataEntry的形式保存下來，注意橫坐標值一般是i的值，而不是你的數據 //里面具體的值，如何將具體數據展示在X軸上我們下面將會說到。 ChartDataEntry *entry = [[ChartDataEntry alloc] initWithX:i y:dotData.price]; [yVals addObject:entry]; } LineChartDataSet *set1 = nil; //請注意這里，如果你的圖表以前繪制過，那么這里直接重新給data賦值就行了。 //如果沒有，那么要先定義set的屬性。 if (self.financeLineChartsView.data.dataSetCount > 0) { LineChartData *data = (LineChartData *)self.financeLineChartsView.data; set1 = (LineChartDataSet *)data.dataSets[0]; // set1.yVals = yVals; set1 = (LineChartDataSet *)self.financeLineChartsView.data.dataSets[0]; set1.values = yVals; //通知data去更新 [self.financeLineChartsView.data notifyDataChanged]; //通知圖表去更新 [self.financeLineChartsView notifyDataSetChanged]; }else{ //創建LineChartDataSet對象 set1 = [[LineChartDataSet alloc] initWithValues:yVals]; //自定義set的各種屬性 //設置折線的樣式 set1.drawIconsEnabled = NO; set1.formLineWidth = 1.1;//折線寬度 set1.formSize = 15.0; set1.drawValuesEnabled = YES;//是否在拐點處顯示數據 set1.valueColors = @[[UIColor whiteColor]];//折線拐點處顯示數據的顏色 [set1 setColor:RGBCOLOR(248, 144, 28)];//折線顏色 //折線拐點樣式 set1.drawCirclesEnabled = NO;//是否繪制拐點 //第二種填充樣式:漸變填充 set1.drawFilledEnabled = YES;//是否填充顏色 NSArray *gradientColors = @[(id)RGBACOLOR(218,168,42,0).CGColor, (id)RGBACOLOR(248,223,91,1).CGColor]; CGGradientRef gradientRef = CGGradientCreateWithColors(nil, (CFArrayRef)gradientColors, nil); set1.fillAlpha = 1.0f;//透明度 set1.fill = [ChartFill fillWithLinearGradient:gradientRef angle:90.0f];//賦值填充顏色對象 CGGradientRelease(gradientRef);//釋放gradientRef //點擊選中拐點的交互樣式 set1.highlightEnabled = YES;//選中拐點,是否開啟高亮效果(顯示十字線) set1.highlightColor = RGBCOLOR(125, 125, 125);//點擊選中拐點的十字線的顏色 set1.highlightLineWidth = 1.1/[UIScreen mainScreen].scale;//十字線寬度 set1.highlightLineDashLengths = @[@5, @5];//十字線的虛線樣式 //將 LineChartDataSet 對象放入數組中 NSMutableArray *dataSets = [[NSMutableArray alloc] init]; [dataSets addObject:set1]; //創建 LineChartData 對象, 此對象就是lineChartView需要最終數據對象 LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets]; [data setValueFont:[UIFont systemFontOfSize:8.f]];//文字字體 [data setValueTextColor:[UIColor whiteColor]];//文字顏色 self.financeLineChartsView.data = data; //這里可以調用一個加載動畫即1s出來一個繪制點 [self.financeLineChartsView animateWithXAxisDuration:1.0f]; }
到了這一步，就基本結束了數據填充。我們也就完成了基本圖表操作。
補充：masnory添加圖表、k線圖
寫到這里就基本完成了基礎操作，下一篇文章我會把我遇到的一些問題寫出來。