介绍:

  • 这是以雪球APP为原型,基于 iOS的K线开源项目。
  • 该项目整体设计思路已经经过某成熟证券APP的商业认证。
  • 本项目将K线业务代码尽可能缩减保留核心功能,可流畅、高效实现手势交互。
  • K线难点在于手势交互和数据动态刷新上,功能并不复杂,关键在于设计思路。

演示:

K线演示文档.gif

建议:

  • 如果搭建K线为公司业务,不建议采用集成度高的开源代码。庞大臃肿,纵然短期匆忙上线,难以应付后期灵活需求变更。

Objective-C版请移步 https://github.com/cclion/CCLKLineChartView
Swift版请移步 https://github.com/cclion/KLineView 。

设计思路&&难点:

K线难点在于手势的处理上,捏合、长按、拖拽都需要展示不同效果。以下是Z君当时做K线时遇到的问题的解决方案;

1. 捏合手势需要动态改变K线柱的宽度,对应的增加或减少当前界面K线柱的展示数量,并且根据当前展示的数据计算出当前展示数据的极值。

采用UITableView类实现,将K线柱封装在cell中,在tableview中监听捏合手势,对应改变cell的高度,同时刷新cell中K线柱的布局来实现动态改变K线柱的宽度。

采用UITableView还有一个好处就是可以采用cell的重用机制降低内存。

注意:因为UITableView默认是上下滑动,而K线柱是左右滑动,Z君这里将UITableView做了一个顺时针90°的旋转。

tableView旋转90°

2. K线柱绘制

K线柱采用CAShapeLayer配合UIBezierPath绘制,内存低,效率高,棒棒哒!

关于CAShapeLayer的使用大家可以看这篇https://zsisme.gitbooks.io/ios-/content/chapter6/cashapelayer.html
(现在的google、baidu,好文章都搜不到,一搜全是简单调用两个方法就发的博客,还是翻了两年前的收藏才找到这个网站,强烈推荐大家)

3. 捏合时保证捏合中心点不变,两边以捏合中间点为中心进行收缩或扩散

因为UITableView在改变cell的高度时,默认时不会改变偏移量,所以不能保证捏合的中心点不变,这里我们的小学知识就会用上了。

捏合时状态.png

我们可以通过变量定义控件间距离。

捏合前后.png

保证捏合中心点的中K线柱的中心点还在捏合前,就需要c1 = c2 ,计算出O2,在捏合完,设置偏移量为O2即可。

计算偏移量.png

4. K线其他线性指标如何绘制

在K线中除了K线柱之外,还有其他均线指标,连贯整个数据显示区。

线性指标

由图可以看出均线指标由每个cell中心点的数据连接相邻的cell中心点的数据。我们依旧将绘制放在cell中,将相连两个cell的线分割成两段,分别在各自所属的cell中绘制。

需要我们做的就是就是在cell中传入相邻的cellsoureData,计算出相邻中点的位置,分为两段绘制。

分割绘制


大家针对K线有什么问题都可以在下面留言,会第一时间解答。
未完待续

iOS股票K线图、分时图绘制相关推荐

  1. iOS 股票K线图、分时图

    前言:以下是博主2016年在做iOS研发时,在某书上发的,搬到CSDN上来,后续会将当时构建的思考逻辑发上来. iOS 股票K线图.分时图,基本上翻遍了开源的项目,要不就是只分享了分时图没有k线纯粹一 ...

  2. iOS 股票K线图绘制

    本文来自简书,原文地址:http://www.jianshu.com/p/f7906f5b4f4c 最近一段时间写了一个iOS的K线图.写这个纯属个人兴趣,正好提高一下自己绘图方面的能力.在写的时候, ...

  3. akshare、pyecharts、pandas实现指定A股股票K线、成交量图(可缩放、可指定日期)

    用pyecharts画出股票K线图和成交量的方法 --------------------------------------------- 在金融市场中,K线图是一种用来表现股票价格波动情况的图表. ...

  4. IOS 股票K线图的实现

    2015-09-04 by 木易哥哥 智者精选,每天获取励志认知能量 www.5izhjx.com 写了lines.RKLineView.getData三个对象完成实现. 首先开始调用 rkLine ...

  5. 【微信小程序经验】各类图表相关组件+Demo源码(折线图,柱状图,K线,分时图)

    各类图表功能,小程序自带API并没有提供,所以很多人就用了其他方法来实现,我将这些实现方法和教程聚合一下,以便能够迅速而方便的使用: 相关文章: 在微信小程序中绘制图表(part1) 在微信小程序中绘 ...

  6. 用python画股票分时图 github_用python的matplotlib和numpy库绘制股票K线均线和成交量的整合效果(含量化验证交易策略代码)...

    在用python的matplotlib和numpy库绘制股票K线均线的整合效果(含从网络接口爬取数据和验证交易策略代码)一文里,我讲述了通过爬虫接口得到股票数据并绘制出K线均线图形的方式,在本文里,将 ...

  7. plotly基于dataframe数据绘制股票K线图并过滤非交易时间

    plotly基于dataframe数据绘制股票K线图并过滤非交易时间 #ohlc过滤非交易时间: import plotly as py # 导入plotly库并命名为py import plotly ...

  8. python蜡烛图预测_python tushare股票K线蜡烛图绘制

    序言:学着学着就学到股票图形绘制了,尝试了下,入门蛮简单的,后面就不知道了,现在好像mplfinance更换了新版本,老版本不支持了.以下代码能实现单个股票K线蜡烛图图形输出,不过我用的是tushar ...

  9. 利用JFreeChart绘制股票K线图

    因为工作的需要,接触了一些股票图形绘制类的工作,其中最主要的还是股票K线图的绘制了,如果利用编程语言最底层的图形绘制方法去绘制这类图形,如果对编程语言不是特别熟悉的话,一般是有很大的困难的,通过在网上 ...

  10. Python绘制股票K线图

    目录 1 股票K线图知识了解 2 用Python绘制股票K线图 2.1 安装绘制K线图的mpl_finance库 2.2 引入相关库 2.3 用Tushare库获取股票基本数据 2.4 日期格式调整及 ...

最新文章

  1. C#编程概念系列(一):面向对象编程
  2. ASP.NET中生成缩略图的代码
  3. WRC 2017最值得关注的专题论坛之一,与大咖探讨青年科学家的创新创业
  4. 【Java 排序】重写Compare方法,实现自己定义排序
  5. JSP的9个内置对象-request
  6. 一种页面数据错误输入提示方法 【转】
  7. 计算机音乐绅士教程,教你学唱薛之谦的《绅士》,这个技巧很实用值得收藏!...
  8. LINUX下FORK的运行机制详细解析
  9. 24K 内存上诞生的操作系统,是如何改变计算机世界的?
  10. ftp 上传文件夹_建站上传下载FTP工具
  11. jquery尺寸:宽度与高度
  12. angularjs源码笔记(1.3)--directive ctrl attrs
  13. buctoj-python 2022.6.19
  14. SSM SpringBoot vue快递柜管理系统
  15. (转)Unity十大插件
  16. 《NFL橄榄球》:卡罗来纳黑豹·橄榄1号位
  17. 面试官问出这几道算法题,你能扛住么?
  18. mongoDB使用及简单命令(忘记了密码怎么办、mongoDB密码重置、创建数据库、mongoDB启动停止)
  19. 为什么你的电脑搜索不到你手机开启的热点
  20. 区块链网发布区块链百科的步骤

热门文章

  1. 关于机器学习模型的评估方法
  2. Win10 实现对计算机的远程控制 (Windows自带+QQ)
  3. python TCP服务器v1.4 - 客户端连接服务器异常(异常情况分类)处理
  4. 计算机及信息系统管理规范,系统运维管理 计算机信息系统运营和维护管理规范方案.doc...
  5. opencv图片显示到mfc控件中,按键打开
  6. 对Linux下使用C++读写word文件的技术方案比较
  7. png图片转换jpg,保姆级教程一学就会
  8. 微信头像制作小程序源码
  9. 自学php的方法,自学php有哪些好的方法
  10. 【Python系列】python文件或文本加密(4种方法)