最近做項目需要畫K線圖和折線圖，引入了第三方的圖標庫Charts。
Charts
????????這個圖表庫基本上能夠滿足大家對于圖表繪制的需要，但是api接口的解釋并不是很詳細，該庫雖然有強大的功能，但是開發者看了很長時間還是一頭霧水。而且網上相關的資源不是很多，所以我寫了這篇文章希望對大家有所幫助。
? ? ? ? 咱們先看一下官方給出的Demo效果:
折線圖
柱狀圖
K線圖
看完了效果圖，咱們逐一介紹各種圖表如何繪制吧!
第一步
引入第三方圖表繪制庫Charts
我用的是Carthage方法引入，直接在Cartfile中加入"github "danielgindi/Charts" ~> 3.0.4"，然后在終端命令行輸入:carthage update --platform iOS即可。
倒入之后，大家的工程項目將會包含這個文件:
由于這個框架使用swift語言寫的，所以OC開發者需要在項目中添加橋接文件，"Charts-Swift"就是橋接文件，大家不用自定義了，想在哪個類中調用Charts,import "Charts-Swift.h"文件就可以了。
第二步
定義圖表，設置圖標的各種屬性
Charts包含的圖表類很多，在此我舉幾個有代表性的例子:BarChartView(柱狀圖),?LineChartView(折線圖),?CandleStickChartView(燭形圖，K線圖)等等。
ChartsView的屬性：
1、scale屬性
顧名思義，就是圖標是否支持拖拽,scaleYEnabled = YES即縱坐標支持拖拽，scaleXEnabled = YES即橫坐標支持拖拽。
2、chartDescription屬性
打開這個屬性，你的圖表上將會有關于你的圖標的描述。例如:? ? _chartView.chartDescription.enabled = YES; _chartView.chartDescription.text = @"王尼瑪的chartsView";
下面的這行小字"王尼瑪的chartsView"就是我的ChartsView的description。
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。
第三步
填充數據
定義了表格的基本屬性之后我們就要填充數據了。在這里我僅以折線圖表為例。
這里需要介紹兩個概念: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;
下面具體介紹如何填充數據:
//定義一個數組承接數據
NSMutableArray *values = [[NSMutableArray alloc] init];
? ? for (int i = 0; i < count; i++)
? ? {
? ? ? ? double val = arc4random_uniform(range) + 3;
//將橫縱坐標以ChartDataEntry的形式保存下來，注意橫坐標值一般是i的值，而不是你的數據 ? ?//里面具體的值，如何將具體數據展示在X軸上我們下面將會說到。
? ? ? ? [values addObject:[[ChartDataEntry alloc] initWithX:i y:val icon: [UIImage imageNamed:@"icon"]]];
? ? }
? ? LineChartDataSet *set1 = nil;
//請注意這里，如果你的圖表以前繪制過，那么這里直接重新給data賦值就行了。
//如果沒有，那么要先定義set的屬性。
? ? if (_chartView.data.dataSetCount > 0)
? ? {
? ? ? ? set1 = (LineChartDataSet *)_chartView.data.dataSets[0];
? ? ? ? set1.values = values;
//通知data去更新
? ? ? ? [_chartView.data notifyDataChanged];
//通知圖表去更新
? ? ? ? [_chartView notifyDataSetChanged];
? ? }
? ? else
? ? {
? ? ? ? set1 = [[LineChartDataSet alloc] initWithValues:values label:@"DataSet 1"];
????????//自定義set的各種屬性
????????[self configSet:set1];
? ? ? ? NSMutableArray *dataSets = [[NSMutableArray alloc] init];
? ? ? ? [dataSets addObject:set1];
????????//將set保存到data當中
?? ? ? ?LineChartData *data = [[LineChartData alloc] initWithDataSets:dataSets];
? ? ? ? ?_chartView.data = data;
? ? }
以上就是填充數據的基本方法。到這里，大家就已經掌握了用charts繪制圖表的基本方法了。下面我們來看一下一些比較難的用法。
重點難點解析
需求一:兩個表格聯動，即拖拽或者一個，另一個需要跟著動。
這個需求可以用協議解決:
- (void)chartScaled:(ChartViewBase *)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY {
? ? CGAffineTransform srcMatrix = chartView.viewPortHandler.touchMatrix;
? ? [self.lineChartView.viewPortHandler refreshWithNewMatrix:srcMatrix
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? chart:self.combinedChartView
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? invalidate:YES];
? ? [self.barChartView.viewPortHandler refreshWithNewMatrix:srcMatrix
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? chart:self.barChartView
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? invalidate:YES];
}
- (void)chartTranslated:(ChartViewBase *)chartView dX:(CGFloat)dX dY:(CGFloat)dY {
? ? CGAffineTransform srcMatrix = chartView.viewPortHandler.touchMatrix;
? ? [self.lineChartView.viewPortHandler refreshWithNewMatrix:srcMatrix
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? chart:self.combinedChartView
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? invalidate:YES];
? ? [self.barChartView.viewPortHandler refreshWithNewMatrix:srcMatrix
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? chart:self.barChartView
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? invalidate:YES];
}
需求二：在一個圖表上繪制多種類型的線表，例如K線圖+柱狀圖
這個需求會用到另一個ChartView類型:CombinedChartView
CombinedChartData *combinedData = [[CombinedChartData alloc] init];
? ? combinedData.lineData = [self generateLineData];
? ? combinedData.candleData = [self generateCandleData];
話不多說，待會我會貼出Demo
需求三：希望在X軸上顯示出具體的數值
我剛才說過，繪制表格的時候X值是i的值，即從0到i，那么我們如何顯示服務器給我們的X值呢？這里需要引入一個協議:IChartAxisValueFormatter,聲明一個NSObject類，如BTCDepthXAxisFormatter遵循IChartAxisValueFormatter協議，重寫-(NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis方法，然后進行賦值，xAxis.valueFormatter = [[BTCDepthXAxisFormatter alloc] init]即可。
需求四：在K線圖上加上最高值和最低值的箭頭指示標志，效果如下圖:
這個問題我也不清楚，沒有找到相關的api接口，希望知道答案的童鞋朋友留言幫我解答哈！
至此，iOS-Charts的基本用法就介紹完了，如果還有不理解的問題，可以加我的微信(justlikeitRobert)，或者點擊我在github上的Demo進行研究，歡迎Star，作為對我碼字的鼓勵與獎賞。??
原鏈接：http://www.lxweimin.com/p/524036c43534
