iOS-Charts看這個就夠了

Fabric發表於2018-02-08
iOS

最近做專案需要畫K線圖和折線圖，引入了第三方的圖示庫Charts。

這個圖表庫基本上能夠滿足大家對於圖表繪製的需要，但是api介面的解釋並不是很詳細，該庫雖然有強大的功能，但是開發者看了很長時間還是一頭霧水。而且網上相關的資源不是很多，所以我寫了這篇文章希望對大家有所幫助。

我們們先看一下官方給出的Demo效果:

折線圖
折線圖
柱狀圖
柱狀圖
K線圖
K線圖

看完了效果圖，我們們逐一介紹各種圖表如何繪製吧!

第一步

引入第三方圖表繪製庫Charts

我用的是Carthage方法引入，直接在Cartfile中加入 github "danielgindi/Charts" ~>3.0.4然後在終端命令列輸入:carthage update --platform iOS即可。

匯入之後，大家的工程專案將會包含這個檔案:

iOS-Charts看這個就夠了
由於這個框架使用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"

iOS-Charts看這個就夠了
下面的這行小字王尼瑪的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;
複製程式碼

下面具體介紹如何填充資料:

//定義一個陣列承接資料
//對應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];
        
    }
複製程式碼

以上就是填充資料的基本方法。到這裡，大家就已經掌握了用charts繪製圖表的基本方法了。下面我們來看一下一些比較難的用法。

重難點解析

  • 需求一:兩個表格聯動，即拖拽或者一個，另一個需要跟著動。

    這個需求可以用協議解決:

    - (void)chartScaled:(ChartViewBase *)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY {
 
 CGAffineTransform srcMatrix = chartView.viewPortHandler.touchMatrix;
 [self.combinedChartView.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.combinedChartView.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線圖上加上最高值和最低值的箭頭指示標誌，效果如下圖:

    帶箭頭的K線圖

    重寫第三方庫中的CandleStickChartRenderer類，這個類是專門負責繪製和渲染K線圖資料的。

    @objc open func drawDataSet(context: CGContext, dataSet: ICandleChartDataSet)方法會遍歷並繪製所有需要展示的數值點，因此，可以在這個方法中取出最大值和最小值的點座標，程式碼如下:

    //寫入最小的Y值的位置和數值
        if minValue > low {
            minValue = low
            minPositionX = xPos
        }
        //寫入最大的Y值的位置和數值
        if maxValue < high {
            maxValue = high
            maxPositionX = xPos
        }
複製程式碼

    繪製箭頭的具體程式碼:

     // 可見區域最左界的箭頭資料
    guard let lowestVisbleEntry = dataSet.entryForIndex(_xBounds.min) as? CandleChartDataEntry else {
        return
    }
    var lowestVisblePoint: CGPoint = CGPoint.init(x: lowestVisbleEntry.x, y: lowestVisbleEntry.low) // 此處主要是為了獲取X座標，lowestVisbleEntry.low可為high、open、close
    trans.pointValueToPixel(&lowestVisblePoint)
    
    // 可見區域最右界的箭頭資料
    guard let highestVisbleEntry = dataSet.entryForIndex( _xBounds.range + _xBounds.min) as? CandleChartDataEntry else {
        return
    }
    var highestVisblePoint: CGPoint = CGPoint.init(x: highestVisbleEntry.x, y: highestVisbleEntry.high)
    trans.pointValueToPixel(&highestVisblePoint)
    
    // 可見區域中的最小值
    let minValueStr = String.init(format: "%.4f", minValue)
    var minPoint: CGPoint = CGPoint.init(x: CGFloat(minPositionX), y: CGFloat(minValue * animator.phaseY))
    // 點轉化為畫素
    trans.pointValueToPixel(&minPoint)
    calculateTextPosition(minValueStr, originPoint: &minPoint, lowestVisibleX: lowestVisblePoint.x, highestVisibleX: highestVisblePoint.x, isMaxValue: false)
    
    // 可見區域中的最大值
    let maxValueStr = String.init(format: "%.4f", maxValue)
    var maxPoint: 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就是我提供的解決方案，完美的解決了箭頭繪製的問題。感興趣的同學們可以下載CandleStickChartRenderer.swift原始碼去替換Charts庫中的CandleStickChartRenderer檔案來實現顯示可見區域內最大值和最小值箭頭的功能。

至此，iOS-Charts的基本用法就介紹完了，如果還有不理解的問題，可以加我的微信(justlikeitRobert)，或者點選我在github上的Demo進行研究，歡迎Star，作為對我碼字的鼓勵與獎賞。?

相關文章