前言
由于公司项目需要,要做港股行情的H5版本,经过分析需求,大致有两块难点: 一是行情的推送接收,二是行情K线的生成及相关操作。本文章主要分析行情K线的相关实现,由于我们前端团队之前是没有相关的工作经验的,所以我们第一反应就是去网上搜现成的插件或者相关文档。经过查找我们发现其实网上这方面的资料不多,相关插件也是比较少,比较符合的相关插件有tradingView以及百度团队开发的ECharts, 但是两者插件体积比较大而且在H5移动端的处理并不是特别好。经过讨论我们决定自研开发。
线上效果
下面是我们H5线上行情系统的实际操作图, 也可以扫码体验。
关键点分析
开发这套行情的K线图表,关键点主要有两点,其一是K线图,其二是手势的处理。K线图难度不是很大在熟悉Canvas画图基础的情况下注意不同区域划分和层级即可,重点在于数据的一些计算和判断;手势的处理就比较麻烦了需要考虑到长按,滑动,放大缩小,惯性滑动,触底加载,横屏等场景。下面就这些关键点进行逐一分析。
具体实现
一,K线图基础
1、K线图基于Z轴(可以理解成css样式中的z-index)分成了三层:
第一层画坐标轴的各种文字和线条包括边框线,XY轴分割线,X轴时间和日期,Y轴价格和成交量成交额等数据文本;
第二层画主体数据图包括分时的走势线,分时的均线,日K的柱状图,MA5,MA10,MA20走势线,最高价,最低价,成交量或成交额的柱状图等K线主体数据图或文本;
第三层画长按K线时出现的十字线及十字线的数据文本。
最后将三层相对定位在同一坐标即可。
2、Z轴每一层基于Y轴分成了三部分:
第一部分画上方走势图的线条,图形,文本;
第二部分画中间时间或日期文本;
第三部分画下方成交量或成交额的线条,图形,文本。
以上canvas的颜色、大小、线条粗细写成插件配置形式即可。
3、几个需要注意的图形画法
3.1、分时图的画法逻辑:从第一个数据点的坐标(x0, y0)画笔开始(beginPath)