? ? ????最近做項目需要畫K線圖和折線圖，引入了第三方的圖標庫Charts。
????????這個圖表庫基本上能夠滿足大家對于圖表繪制的需要，但是api接口的解釋并不是很詳細，該庫雖然有強大的功能，但是開發(fā)者看了很長時間還是一頭霧水。而且網(wǎng)上相關(guān)的資源不是很多，所以我寫了這篇文章希望對大家有所幫助。
?????????咱們先看一下官方給出的Demo效果:
看完了效果圖，咱們逐一介紹各種圖表如何繪制吧!
第一步
引入第三方圖表繪制庫Charts
我用的是Carthage方法引入，直接在Cartfile中加入"github "danielgindi/Charts" ~> 3.0.4"，然后在終端命令行輸入:carthage update --platform iOS即可。
倒入之后，大家的工程項目將會包含這個文件:
由于這個框架使用swift語言寫的，所以O(shè)C開發(fā)者需要在項目中添加橋接文件，"Charts-Swift"就是橋接文件，大家不用自定義了，想在哪個類中調(diào)用Charts,import "Charts-Swift.h"文件就可以了。
第二步
定義圖表，設(shè)置圖標的各種屬性
Charts包含的圖表類很多，在此我舉幾個有代表性的例子:BarChartView(柱狀圖),?LineChartView(折線圖),?CandleStickChartView(燭形圖，K線圖)等等。
ChartsView的屬性：
1、scale屬性
顧名思義，就是圖標是否支持拖拽,scaleYEnabled = YES即縱坐標支持拖拽，scaleXEnabled = YES即橫坐標支持拖拽。
2、chartDescription屬性
打開這個屬性，你的圖表上將會有關(guān)于你的圖標的描述。例如: _chartView.chartDescription.enabled = YES; _chartView.chartDescription.text = @"王尼瑪?shù)腸hartsView";
下面的這行小字"王尼瑪?shù)腸hartsView"就是我的ChartsView的description。
3、pinchZoomEnabled
是否支持X軸、Y軸同時縮放，如果是YES ，則代表支持同時縮放。
4、maxVisibleCount
這個屬性是控制圖標上的數(shù)字展示的最大個數(shù)的，如果你的圖標不想顯示上面的數(shù)字，就可以把maxVisibleCount屬性設(shè)置為0。
5、legend
這個Bool屬性是設(shè)置要不要顯示圖例的，看到上圖底部的"-- DataSet 1"了嗎，如果你不想要顯示這一欄，就把legend.enabled設(shè)置為NO。
6、noDataText
沒有數(shù)據(jù)的時候ChartsView上需要顯示什么文字。
chartsView中有三個重要的屬性需要開發(fā)者去設(shè)置，那就是leftAxis(左軸)，rightAxis（右軸），xAxis（X軸）。
7、doubleTapToZoomEnabled
是否允許雙擊縮放。
8、delegate
代理，大家都懂的。對應(yīng)的protocal有4個，都是可選選項：
圖表中的數(shù)值被選中
- (void)chartValueSelected:(ChartViewBase * _Nonnull)chartView entry:(ChartDataEntry * _Nonnull)entry highlight:(ChartHighlight * _Nonnull)highlight;
圖標中的空白區(qū)域被點擊
- (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
設(shè)置為NO的話，則對應(yīng)的坐標軸不顯示。
2、labelPosition
表示左軸坐標的位置，有2個選項:YAxisLabelPositionOutsideChart = 0,YAxisLabelPositionInsideChart = 1,坐標顯示在軸內(nèi)或者是軸外。
3、labelCount
即在坐標軸上最多顯示多少個坐標點
4、drawGridBackgroundEnabled
是否要畫網(wǎng)格
5、gridLineDashLengths
gridLineDashLengths = @[@2.f, @5.f];即線段寬為2.0f，空格寬為5.0f。
第三步
填充數(shù)據(jù)
定義了表格的基本屬性之后我們就要填充數(shù)據(jù)了。在這里我僅以折線圖表為例。
這里需要介紹兩個概念: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;
下面具體介紹如何填充數(shù)據(jù):
//定義一個數(shù)組承接數(shù)據(jù)
NSMutableArray *values = [[NSMutableArray alloc] init];
? ? for (int i = 0; i < count; i++){
????????double val = arc4random_uniform(range) + 3;
//將橫縱坐標以ChartDataEntry的形式保存下來，注意橫坐標值一般是i的值，而不是你的數(shù)據(jù) ? ?//里面具體的值，如何將具體數(shù)據(jù)展示在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;
? ? }
以上就是填充數(shù)據(jù)的基本方法。到這里，大家就已經(jīng)掌握了用charts繪制圖表的基本方法了。下面我們來看一下一些比較難的用法。
重點難點解析
需求一:兩個表格聯(lián)動，即拖拽或者一個，另一個需要跟著動。
這個需求可以用協(xié)議解決:
- (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軸上顯示出具體的數(shù)值
我剛才說過，繪制表格的時候X值是i的值，即從0到i，那么我們?nèi)绾物@示服務(wù)器給我們的X值呢？這里需要引入一個協(xié)議:IChartAxisValueFormatter,聲明一個NSObject類，如BTCDepthXAxisFormatter遵循IChartAxisValueFormatter協(xié)議，重寫-(NSString *)stringForValue:(double)value axis:(ChartAxisBase *)axis方法，然后進行賦值，xAxis.valueFormatter = [[BTCDepthXAxisFormatter alloc] init]即可。
需求四：在K線圖上加上最高值和最低值的箭頭指示標志，效果如下圖:
重寫第三方庫中的CandleStickChartRenderer類，這個類是專門負責繪制和渲染K線圖數(shù)據(jù)的。 @objc open func drawDataSet(context: CGContext, dataSet: ICandleChartDataSet)方法會遍歷并繪制所有需要展示的數(shù)值點，因此，可以在這個方法中取出最大值和最小值的點坐標，代碼如下:?
//寫入最小的Y值的位置和數(shù)值
? ? ? ? ? ? ifminValue > low {
? ? ? ? ? ? ? ? minValue = low
? ? ? ? ? ? ? ? minPositionX = xPos
? ? ? ? ? ? }
? ? ? ? ? ? //寫入最大的Y值的位置和數(shù)值
? ? ? ? ? ? ifmaxValue < high {
? ? ? ? ? ? ? ? maxValue = high
? ? ? ? ? ? ? ? maxPositionX = xPos
? ? ? ? ? ? }
?繪制箭頭的具體代碼:?
// 可見區(qū)域最左界的箭頭數(shù)據(jù)
? ? ? ? guardletlowestVisbleEntry = dataSet.entryForIndex(_xBounds.min)as?CandleChartDataEntryelse{
? ? ? ? ? ? return
? ? ? ? }
? ? ? ? varlowestVisblePoint:CGPoint= CGPoint.init(x: lowestVisbleEntry.x, y: lowestVisbleEntry.low)// 此處主要是為了獲取X坐標，lowestVisbleEntry.low可為high、open、close
? ? ? ? trans.pointValueToPixel(&lowestVisblePoint)
? ? ? ? // 可見區(qū)域最右界的箭頭數(shù)據(jù)
? ? ? ? guardlethighestVisbleEntry = dataSet.entryForIndex( _xBounds.range + _xBounds.min)as?CandleChartDataEntryelse{
? ? ? ? ? ? return
? ? ? ? }
? ? ? ? varhighestVisblePoint:CGPoint= CGPoint.init(x: highestVisbleEntry.x, y: highestVisbleEntry.high)
? ? ? ? trans.pointValueToPixel(&highestVisblePoint)
? ? ? ? // 可見區(qū)域中的最小值
? ? ? ? letminValueStr = String.init(format:"%.4f", minValue)
? ? ? ? varminPoint:CGPoint= CGPoint.init(x: CGFloat(minPositionX), y: CGFloat(minValue * animator.phaseY))
? ? ? ? // 點轉(zhuǎn)化為像素
? ? ? ? trans.pointValueToPixel(&minPoint)
? ? ? ? calculateTextPosition(minValueStr, originPoint: &minPoint, lowestVisibleX: lowestVisblePoint.x, highestVisibleX: highestVisblePoint.x, isMaxValue:false)
? ? ? ? // 可見區(qū)域中的最大值
? ? ? ? letmaxValueStr = String.init(format:"%.4f", maxValue)
? ? ? ? varmaxPoint:CGPoint= CGPoint.init(x: CGFloat(maxPositionX), y: CGFloat(maxValue * animator.phaseY))
? ? ? ? trans.pointValueToPixel(&maxPoint)
? ? ? ? calculateTextPosition(maxValueStr, originPoint: &maxPoint, lowestVisibleX: lowestVisblePoint.x, highestVisibleX: highestVisblePoint.x, isMaxValue:true)
?特別感謝@Leo就是我提供的解決方案，完美的解決了箭頭繪制的問題。感興趣的同學(xué)們可以下載CandleStickChartRenderer.swift源碼去替換Charts庫中的CandleStickChartRenderer文件來實現(xiàn)顯示可見區(qū)域內(nèi)最大值和最小值箭頭的功能。
至此，iOS-Charts的基本用法就介紹完了，如果還有不理解的問題，可以加我的微信(justlikeitRobert)，或者點擊我在github上的Demo進行研究，歡迎Star，作為對我碼字的鼓勵與獎賞。??
