iOS股票K线图绘制

作者: Msoso | 来源:发表于2018-04-24 19:28 被阅读542次

    写在开头

    最近造了个轮子,绘制股票的k线图。刚开始接收到这个需求的时候真的一脸懵逼,因为没有接触过相关知识。

    不过经过研究,其实还是很好理解的,这里稍微科普一下K线图吧。所有的K线图都是由一个个的蜡烛图组成的,蜡烛图是这样子的


    不难看出,我们只需要知道最高价,最低价,开盘价,收盘价就可以画出一个完整的蜡烛图了。每一个蜡烛图对应一个时间,以时间为横坐标,价格为纵坐标,就可以组成一个简易的K线图。
    我这里除了K线图以外,底部加入了柱状图用来查看所选时间的交易量,K线图图中加入了MA5,MA10,MA20的日均线。
    完整的科普可以看这里:K线图科普 - 百度经验

    最后的效果


    因为做成gif图,颜色和流畅度都有点问题,实际上体验是非常流畅的,感觉不到任何卡顿。

    使用方法

    使用很简单,先创建HSStockChartModelGroup实例,该实例是整个表的数据源,然后创建好HSStockChartView,赋值上数据源,最后reloadData即可。
    示例代码

    HSStockChartModelGroup * group = [HSStockChartModelGroup alloc] init];
     //此处array为HSStockChartModel数组,需要时间,开盘价,收盘价,最高价,最低价,出货量,日均线数据会自动算出
    group.chartModelArray = array; 
    self.chartView.modelGroup = group;
    [self.chartView reloadData];
    
    

    HSStockChartView提供了一个delegate

    @protocol HSStockChartViewDelegate <NSObject>
    
    - (void)chartViewNeedLoadNewData:(HSStockChartView *)chartView complete:(void (^)(NSArray * array))complete;
    
    @end
    

    这个协议是用来刷新数据的,每当用户往前滑动到当前给出数据的一半时,这个协议方法就会调用,需要给出新的数据源。在滑动时加载新的数据源已经做过了处理,用户感受不到任何加载数据的痕迹,体验上来看非常流畅。

    原理解析

    为了能有一个流畅的滑动体验,整个View层的结构我是这样设计的。
    底层是一个ScrollView,然后在ScrollView上add一个ContainerView,最后其他的K线图柱状图之类的都绘制在ContainerView上。

    ScrollView主要是提供左右滑动的手势,而不是为了放大缩小,如果直接使用scrollView自带的放大缩小,会把Vertical方向也放大了,不能达到我们的要求。采用的方式是添加pinch手势在ContainerView上。另外要说的一点是,绘制图形采用的是CAShapeLayer绘制,节约内存,并且做了只创建和绘制屏幕内能见到的图形的优化,极大的提升了操作体验。要达到这一点要求,需要在做滑动放大等改变时,进行实时计算屏幕内包含哪些图形。

    最后

    惯例,放上HSStockChartView的链接,喜欢的点个star吧。

    相关文章

      网友评论

      • 风火游龙:大神你好:能砍一下你其中一组数据源格式吗?
        我创建的-(NSMutableArray<HSStockChartModel *> *)dataArray
        在所有的属性赋值之后,运行给崩了,找不见原因,请不吝赐教
        风火游龙:@Msoso 谢谢大神,已经完美解决了
        Msoso:@风火游龙 HSStockChartModelGroup * group = [HSStockChartModelGroup alloc] init];
        //此处array为HSStockChartModel数组,需要时间,开盘价,收盘价,最高价,最低价,出货量,日均线数据会自动算出
        group.chartModelArray = array;
        self.chartView.modelGroup = group;
        [self.chartView reloadData];

        你的数据源是这样赋值的吗,array和我注释的是一样吗
      • xiari1991:十字交叉线好像是有点问题
        xiari1991:@Msoso 不好意思,线单机就会出来。就是线的位置感觉不是在收盘的位置,拖动也是单根线移动不是同时移动的,不知道这是不是就是你们的需求
        xiari1991:@Msoso 不知道是不是我不会用。现在我使用的时候,需要双击才会出现交叉线,线的拖动是单根线移动,另一根线没有反应,并且拖动不太灵敏
        Msoso:@yf_js 可以说下什么问题吗,这个chartView现在已经在我们的APP上使用了,暂时还没测出来bug哦
      • ios111111:你的demo只有几个文件。下载后跑步起来
        Msoso:@我帮你打水 什么东西拿来就直接跑新手能得到什么呢
        AppleIdGX:默默说的说一句,这不是坑新手么
        Msoso:@ios111111 里面是chartview的封装,数据源要你自己提供的,不能直接跑的

      本文标题:iOS股票K线图绘制

      本文链接:https://www.haomeiwen.com/subject/qxdycftx.html