iOS-Charts看這個就夠了

最近作項目須要畫K線圖和折線圖，引入了第三方的圖標庫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的屬性：

一、scale屬性

顧名思義，就是圖標是否支持拖拽,scaleYEnabled = YES即縱座標支持拖拽，scaleXEnabled = YES即橫座標支持拖拽。

二、chartDescription屬性

打開這個屬性，你的圖表上將會有關於你的圖標的描述。例如: chartView.chartDescription.enabled = YES chartView.chartDescription.text = @"王尼瑪的chartsView"

下面的這行小字 王尼瑪的chartsView就是個人ChartsView的description。

三、pinchZoomEnabled

是否支持X軸、Y軸同時縮放，若是是YES ，則表明支持同時縮放。

四、maxVisibleCount

這個屬性是控制圖標上的數字展現的最大個數的，若是你的圖標不想顯示上面的數字，就能夠把maxVisibleCount屬性設置爲0。

五、legend

這個Bool屬性是設置要不要顯示圖例的，看到上圖底部的"-- DataSet 1"了嗎，若是你不想要顯示這一欄，就把legend.enabled設置爲NO。

六、noDataText

沒有數據的時候ChartsView上須要顯示什麼文字。chartsView中有三個重要的屬性須要開發者去設置，那就是leftAxis(左軸)，rightAxis（右軸），xAxis（X軸）。

七、doubleTapToZoomEnabled

是否容許雙擊縮放。

八、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屬性

一、enabled

設置爲NO的話，則對應的座標軸不顯示。

二、labelPosition

表示左軸座標的位置，有2個選項:YAxisLabelPositionOutsideChart = 0,YAxisLabelPositionInsideChart = 1,座標顯示在軸內或者是軸外。

三、labelCount

即在座標軸上最多顯示多少個座標點

四、drawGridBackgroundEnabled

是否要畫網格線

五、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線圖上加上最高值和最低值的箭頭指示標誌，效果以下圖:

  

  重寫第三方庫中的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，做爲對我碼字的鼓勵與獎賞。😄