iOS 圖表工具charts之CandleStickChartView(K線)

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

CandleStickChartView在charts中可以用來繪制K線圖,由於charts是基於swift開發的，如果需要和objective-C混編(通過pod的方式不用管)，可以參考我的上幾篇文章iOS OC中橋接swift第三方庫》，這里主要講的是CandleStickChartView的一些常用屬性和一些基本用法，實際情況以開發為准

CandleStickChartView的基本屬性介紹

    CandleStickChartView *chartView = [[CandleStickChartView alloc] init];
    //設置偏移
    [chartView setExtraOffsetsWithLeft:10 top:10 right:10 bottom:10];
    //開啟border
    chartView.drawBordersEnabled = YES;
    chartView.borderLineWidth = .5f;
    chartView.borderColor = UIColor.blackColor;
    //設置背景
    chartView.drawGridBackgroundEnabled = NO;
    chartView.gridBackgroundColor = [UIColor grayColor];
    //無內容顯示
    chartView.noDataText = @"";
    //關閉描述
    chartView.chartDescription.enabled = NO;
    chartView.chartDescription.text = @"tiny`s kLineChart demo";
    //關閉圖例
    chartView.legend.enabled = NO;
    //縮放
    chartView.scaleXEnabled = YES;
    chartView.scaleYEnabled = NO;
    chartView.autoScaleMinMaxEnabled = YES;
    chartView.highlightPerTapEnabled = YES;
    chartView.highlightPerDragEnabled = NO;
    chartView.pinchZoomEnabled = NO;  //手勢捏合
    chartView.dragEnabled = YES;  //開啟拖拽
    chartView.dragDecelerationFrictionCoef = 0.5;  //0 1 慣性
    chartView.doubleTapToZoomEnabled = NO;
    //代理
    chartView.delegate = self;
    
    //leftAxis
    ChartYAxis *rightAxis = chartView.rightAxis;
    rightAxis.enabled = YES;
    rightAxis.labelPosition = YAxisLabelPositionInsideChart;
    rightAxis.drawGridLinesEnabled = YES;
    rightAxis.gridLineDashLengths = @[@2,@4];
    rightAxis.labelTextColor = UIColor.blackColor;
    rightAxis.labelFont = [UIFont systemFontOfSize:10];
    rightAxis.decimals = 2;
    rightAxis.labelCount = 6;  //設置顯示最大點數
    rightAxis.forceLabelsEnabled = YES;  //強制label個數
//    leftAxis.inverted = YES;
    //設置樣式
    LeftAxisFormatter *leftFormatter = [LeftAxisFormatter new];
    leftFormatter.digital = 2;
    rightAxis.valueFormatter = leftFormatter;
    
    //rightAxis
    ChartYAxis *leftAxis = chartView.leftAxis;
    leftAxis.enabled = NO;
    
    //xAxis
    ChartXAxis *xAxis = chartView.xAxis;
    xAxis.enabled = YES;
    xAxis.labelPosition = XAxisLabelPositionBottom;
    xAxis.labelCount = 2;  //設置顯示點數
    xAxis.forceLabelsEnabled = YES;  //強制label個數
    xAxis.avoidFirstLastClippingEnabled = YES;  //避免文字顯示不全 這個屬性很重要
    xAxis.granularityEnabled = YES;  //設置重復不顯示
    //不畫線
    xAxis.drawGridLinesEnabled = NO;
    xAxis.spaceMin = 0.5;
    xAxis.spaceMax = 0.5;

CandleChartDataEntry代碼每個柱子圖形

    NSMutableArray *array = [NSMutableArray array];
    for (int i = 0; i < datas.count; i++) {
        NSDictionary *dict = datas[i];
        double high = [dict[@"dbHighPrice"] doubleValue];
        double low = [dict[@"dbLowPrice"] doubleValue];
        double open = [dict[@"dbOpenPrice"] doubleValue];
        double close = [dict[@"dbClosePrice"] doubleValue];
        CandleChartDataEntry *entry = [[CandleChartDataEntry alloc] initWithX:(i) shadowH:high shadowL:low open:open close:close];
        [array addObject:entry];
    }

CandleChartDataSet代碼所有的柱子的集合

    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;

CandleChartData

    //創建數據
    CandleChartData *candleData = [[CandleChartData alloc] initWithDataSet:set];
    //賦值
    self.chartView.data = candleData;

一些需要注意的點：
1.顯示美國線

    CandleChartDataSet:
    set.showCandleBar = NO

2.影線的顏色跟隨k線，這樣就會根據k線值自動變成綠色或者紅色

    CandleChartDataSet: 
    set.shadowWidth = 0.7;
    set.shadowColorSameAsCandle = YES;

3.k線上升顏色，是否填充等屬性，用來設置上升顏色下降顏色，是否是空心實心k線

    CandleChartDataSet: 
    //下降顏色 是否填充填充
    set.decreasingColor = UIColorHex(0x32BE89);
    set.decreasingFilled = YES;
    //上升顏色 是否填充填充
    set.increasingColor = UIColorHex(0xFD4C60);
    set.increasingFilled = NO;

4.是否顯示k線值

    CandleChartDataSet: 
    //不顯數字
    set.drawValuesEnabled = NO;

5.是否顯示十字光標

    CandleChartDataSet: 
    set.drawHorizontalHighlightIndicatorEnabled = NO;
    set.drawVerticalHighlightIndicatorEnabled = NO;

6.軸線方向 AxisDependencyRight 這樣當我們滑動k線的時候k線會根據當前k線最大值和最小值調整縮放比例

    CandleChartDataSet: 
    //軸線方向
    set.axisDependency = AxisDependencyRight;

7.k線設置縮放比例，最大縮放值 最小縮放值

    //最大縮放值 最小縮放值  y軸不縮放 minScl maxScl根據實際情況調整
    [self.chartView setScaleMinima:minScl scaleY:1];
    [self.chartView.viewPortHandler setMaximumScaleX:maxScl];

8.當前縮放比例設置

    CGAffineTransform srcMatrix = _chartView.viewPortHandler.touchMatrix;
    //scl根據實際情況設置當前縮放比例
    srcMatrix.a = scl;
    [self.chartView.viewPortHandler refreshWithNewMatrix:srcMatrix chart:self.chartView invalidate:YES];

9.k線移動到指定位置 第一次需要滾動到最新值

    //開局移動到最右邊xMax為最大x軸值
    [self.chartView moveViewToX:self.chartView.data.xMax];

10.選中k線，拿到當前選中的點的x軸坐標，以便於拿到選中的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];
    }
}

其他待續

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