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

  • 相关阅读:
    mybatis sql xml 字符逃脱
    npp 文本编辑器 开源
    保存分区表时出现错误(0000000001)函数不正确
    常见笔记本进入bios方法
    chrome 字体太浅,如何设置
    Python基础概念
    xp下复制ZIP文件极慢,右键点击也极慢(ZIP文件越大越慢) 解决方法
    联想V460 装XP。记录
    极度诡异的内存问题,这几天遇到。特记录
    时间注意事项
  • 原文地址:https://www.cnblogs.com/qqcc1388/p/11172385.html
Copyright © 2011-2022 走看看