zoukankan      html  css  js  c++  java
  • 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/

  • 相关阅读:
    A Survey of Deep Clustering Algorithms
    随机傅里叶特征(Random Fourier Features)
    MATLAB实例:二元高斯分布图
    MATLAB实例:PCA(主成成分分析)详解
    MATLAB用“fitgmdist”函数拟合高斯混合模型(一维数据)
    Extreme Learning Machine
    在MATLAB R2018b中配置VLFeat
    Deep Clustering Algorithms
    机器学习优化算法
    sql注入总结
  • 原文地址:https://www.cnblogs.com/qqcc1388/p/11172345.html
Copyright © 2011-2022 走看看