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吧。

相关文章

  • iOS股票K线图

    mark:iOS股票K线图 iOS 股票K线图绘制 iOS 股票K线图绘制 从零开始实现k线图走势图绘制(iOS实战篇)

  • iOS股票K线图绘制

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

  • iOS 股票K线图绘制

    最近一段时间写了一个iOS的K线图。写这个纯属个人兴趣,正好提高一下自己绘图方面的能力。在写的时候,参考了Coco...

  • ios股票K线图的绘制

    前言:因为工作需要,要绘制一个股票K线图,因为自己不炒股,所以对股票知识很是有限,当时也想在网上找个demo直接拿...

  • MPAndroidChart绘制K线图(三)

    MPAndroidChart绘制K线图(一)高亮线自定义MPAndroidChart绘制K线图(二)动态时间格式+...

  • MPAndroidChart绘制K线图(二)

    MPAndroidChart绘制K线图(一)高亮线自定义MPAndroidChart绘制K线图(二)动态时间格式+...

  • 什么是K线

    K线图表是市场运行轨迹的直接描述,无论是股票、外汇、黄金、期货,所有的证券k线图表只要其绘制的原理和机制相同,必然...

  • iOS股票K线图

    有段时间没更新文章了,之前放出了分时图Demo StockChart,应广大网友的呼声,现在放出K线图Demo,代...

  • iOS 股票K线图

    好久没有在简书写东西记录, 前段时间想要将现在工程中用的股票图表绘制重写一遍, 主观臆断一两个星期可以完成, 最后...

  • iOS股票K线图、分时图绘制

    标准对标雪球APPK线。 Z君这几天会将之前写的K线框架review,同时在简书也会将之前搭建K线遇到的问题,发出...

网友评论

  • 风火游龙:大神你好:能砍一下你其中一组数据源格式吗?
    我创建的-(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