html54stock首页、文档和下载 - HTML5 版本的全套股票行情图 - 开源中国

安宇雨 - 随手采集
2019-02-21 10:16:08
随手采集
0000-未整理-等待研究

请使用支持 HTML5 的浏览器查看，推荐使用 Google Chrome 或者 iPad 体验，IE6，7，8 都不支持 HTML5

下面是行情图的快照和每个图的实现难点简介，有兴趣的朋友请用 SVN checkout 出来，或者直接访问项目文件看源码。

K线图滑块控制

这个 K 线图和 Flash 实现的 K 线图非常接近，滑块控制是实现的难点，这里是根据滑块滑动的位置计算 K 线数据的范围，并实时重画，事实证明 HTML5 Canvas 标签的性能还是相当的好的，在 PC 机上每秒可以重画 20 次以上，而在 iPad 上每秒可以重画 10 次左右，在 iPad 上流畅性有一定问题，所以在 iPad 上实现了另外一个版本，使用手指滑动通过 touch 相关的时间控制范围

K线图触摸控制

请使用 iPad 体验效果

这个 K 线图和上面的基本一样，但是控制 K 线范围改用了触摸事件，用 touchstart, touchmove 等事件，这个需要实时计算手指所在的坐标，然后根据坐标判断是否要显示浮窗，显示 K 线柱的高，开，低，收等信息。

大分时图

分时图的实现是在一张画布上，当鼠标在画布上移动时，需要根据鼠标的坐标出十字，并显示鼠标所在时间的价格，这儿的十字叉是 div 实现的，而在画布上显示对应时间的价格是用了画布的 clearRect 方法，先把指定区域的内容清除掉，然后再重新画上对应价格。这样实现的流畅性非常的好，无论是在平板上还是在 PC 上。