iOS 圖表工具charts之CombinedChartView

關於charts的系列視圖介紹傳送門：
iOS 圖表工具charts介紹
iOS 圖表工具charts之LineChartView
iOS 圖表工具charts之BarChartView
iOS 圖表工具charts之PieChartView
iOS 圖表工具charts之CandleStickChartView
iOS 圖表工具charts之CombinedChartView

CombinedChartView在charts中可以用來繪制組合圖，即前面介紹的所有圖標的組合形態，通過CombinedChartView可以設置各種圖表的圖層,由於charts是基於swift開發的，如果需要和objective-C混編(通過pod的方式不用管)，可以參考我的上幾篇文章iOS OC中橋接swift第三方庫》，這里主要講的是CombinedChartView的一些常用屬性和一些基本用法，實際情況以開發為准

關於K線，我們知道K線能反應一只股票的實時狀態以及漲跌幅度的一種圖表，K線主要是又4組數組組成的，分別是開盤價，收盤價，最高價，最低價

K線上面的每根柱子都是有這4組數據按照一定的比例畫出來的，charts中就提供了一種繪制k線的視圖，CombinedChartView，我們如果需要畫出k線柱子，只需要傳入這4個價格即可，對應的紅色還是綠色可以自行設置紅漲綠跌或者綠漲紅跌

組合圖可以包含之前介紹的所有圖表，這些圖表能夠同時顯示在CombinedChartView中,在CombinedChartView中可以通過drawOrder來設置層級關系

    //設置層級
    chartView.drawOrder = @[
                            @(CombinedChartDrawOrderBar),
                            @(CombinedChartDrawOrderBubble),
                            @(CombinedChartDrawOrderCandle),
                            @(CombinedChartDrawOrderLine),
                            @(CombinedChartDrawOrderScatter)
                            ];

CombinedChartView的屬性基本同之前介紹的屬性差不多，有需要的可以回到前面幾篇文章查看，基本都是一些縮放比例，顯示個數，圖例，捏合手勢，是否滾動，是否網格，label個數，字體大小顏色線寬，xAxis,leftAxis,RightAxis等等，前面都已經介紹的很詳細了，這里就不在累述了

給CombinedChartView賦值

    CombinedChartData *chartData = [[CombinedChartData alloc] init];
    chartData.candleData = candleData;
    chartData.lineData = lineData;
    chartData.barData = barData;
    self.chartView.data = chartData;

我們需要做的就是分別根據datas初始化對應的candleData,lineData,barData數據了
關於怎么創建candleData請參考iOS 圖表工具charts之CandleStickChartView
關於怎么創建lineData請參考iOS 圖表工具charts之LineChartView
關於怎么創建barData請參考iOS 圖表工具charts之BarChartView

創建完數據之后直接將數據賦值給CombinedChartData即可，這里lineData，barData，candleData可以為nil,但是呢不能全部為nil,如果這些數據全部為nil可以設置self.chartView.data=nil，而不要self.chartView.data = chartData(chartData至少有一組數據是可行的,否則會崩潰); 還有lineData是可以放多條線的，之前講lineChartView的時候應該是有講過的，如果記不清了，請回頭看一下，謝謝

一個完整的k線是有上半邊k線圖(chartView)，和下半邊指數圖組成的(subChartView),需要注意的
1.滾動一般都是同步的，也是上邊的chartView滾動，下邊的subChartView也要跟着滾動

#pragma mark 圖表被移動
-(void)chartTranslated:(ChartViewBase *)chartView dX:(CGFloat)dX dY:(CGFloat)dY{
    CGAffineTransform srcMatrix = chartView.viewPortHandler.touchMatrix;
    [self.chartView.viewPortHandler refreshWithNewMatrix:srcMatrix chart:self.chartView invalidate:YES];
    [self.subChartView.viewPortHandler refreshWithNewMatrix:srcMatrix chart:self.subChartView invalidate:YES];
}

2.縮放是同步的，初始縮放比例，最大縮放比例，實時縮放比例必須是同步的

#pragma mark 圖表被縮放
-(void)chartScaled:(ChartViewBase *)chartView scaleX:(CGFloat)scaleX scaleY:(CGFloat)scaleY{
    CGAffineTransform srcMatrix = chartView.viewPortHandler.touchMatrix;
    [self.chartView.viewPortHandler refreshWithNewMatrix:srcMatrix chart:self.chartView invalidate:YES];
    [self.subChartView.viewPortHandler refreshWithNewMatrix:srcMatrix chart:self.subChartView invalidate:YES];
}

3.點擊了實時顯示當前選中值的價格面板,找到選中的model，並將model傳遞出去

//k線代理方法
-(void)chartValueSelected:(ChartViewBase *)chartView entry:(ChartDataEntry *)entry highlight:(ChartHighlight *)highlight{
     NSInteger index = highlight.x;
    //index為當前選中的x值
    if(index  < self.datas.count){
        //根據當前的index能拿到對應的數據模型
        Model *model = self.datas[index];
    }
}

4.CombinedChartView顯示組合圖的時候會出現第一個和最后一個圖會顯示一半(顯示不全),如果你遇到這樣的問題，下面這種方法可以解決你的問題
=
參考github Charts issues：https://github.com/danielgindi/Charts/issues/2106

    ChartXAxis *xAxis = chartView.xAxis;
    //這個很重要 可以解決顯示半個bar的bug
    xAxis.spaceMin = 0.5;
    xAxis.spaceMax = 0.5;

5.畫折線

      UIColor *color = colors[idx];
      [set setColor:color];
      set.lineWidth = 0.5;
      set.drawCirclesEnabled = NO;
      set.drawValuesEnabled = NO;
      set.axisDependency = AxisDependencyRight;
      set.highlightEnabled = NO;
      set.drawHorizontalHighlightIndicatorEnabled = NO;
      set.drawVerticalHighlightIndicatorEnabled = NO;
      set.mode = LineChartModeLinear;

6.畫空心線

       [set setColor:[UIColor clearColor]];
       set.lineWidth = 0.5;
       set.drawCirclesEnabled = YES;
       set.circleRadius = 2.5f;
       set.circleColors = @[UIColor.redColor];
       set.circleHoleColor = [UIColor clearColor];
       set.circleHoleRadius = 2.0f;
       set.drawCircleHoleEnabled = YES;
       set.lineDashPhase = .5f;
       set.lineDashLengths = @[@.5f];
       set.drawValuesEnabled = NO;
       set.axisDependency = AxisDependencyRight;
       set.highlightEnabled = NO;
       set.drawHorizontalHighlightIndicatorEnabled = NO;
       set.drawVerticalHighlightIndicatorEnabled = NO;
       set.mode = LineChartModeLinear;

7.柱狀圖

       BarChartDataSet *set = [[BarChartDataSet alloc] initWithEntries:entrys label:setName];
        //設置set屬性
        set.axisDependency = AxisDependencyRight;
        set.formLineWidth = 5;
        set.highlightEnabled = NO;
        [set setColors:colors];
        [data addDataSet:set];

8.K線

   CandleChartDataSet *set = [[CandleChartDataSet alloc] initWithEntries:array label:@"kLine DataSet"];
    //下降顏色 是否填充填充
    set.decreasingColor = UIColorHex(0x32BE89);
    set.decreasingFilled = YES;
    //上升顏色 是否填充填充
    set.increasingColor = UIColorHex(0xFD4C60);
    set.increasingFilled = YES;
    //顯示美國線
    //set.showCandleBar = NO;
    //陰影線的寬度 顏色跟隨
    set.shadowWidth = 0.7;
    set.shadowColorSameAsCandle = YES;
    //k線柱間隙
    set.barSpace = 0.15;
    //是否現在十字標識
    set.drawHorizontalHighlightIndicatorEnabled = NO;
    set.drawVerticalHighlightIndicatorEnabled = NO;
    //軸線方向
    set.axisDependency = AxisDependencyRight;
    //不顯數字
    set.drawValuesEnabled = NO;

9.有時候可以畫一些透明的線用來占位置

    //set
    LineChartDataSet *lineSet = [[LineChartDataSet alloc] initWithEntries:listEntry label:@"Line DataSet x"];
    [lineSet setColor:UIColor.clearColor];
    lineSet.drawValuesEnabled = NO;
    lineSet.drawCirclesEnabled = NO;
    lineSet.drawHorizontalHighlightIndicatorEnabled = NO;
    lineSet.drawVerticalHighlightIndicatorEnabled = NO;
    //不可以被點擊
    lineSet.highlightEnabled = NO;

10.其他關於K線需要注意的點請參考iOS 圖表工具charts之CandleStickChartView中需要注意的點

11.如果指標圖為MACD的情況下，需要保證bar的個數和K線的bar個數一樣多，都在會出現上下兩個bar中心點不一樣的情況 如果不同可以使用填充數據的方式，讓后填充的數據用透明顏色

其他待續

轉載請標注來源：https://www.cnblogs.com/qqcc1388/