h5行情k线开发

前言

        由于公司项目需要，要做港股行情的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)