html54stockHTML5 版本的全套股票行情图

联合创作 · 2023-09-19 04:36

请使用支持 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 上。

小分时图

交易分析图

交易分析图画图不是难点,难点在于对鼠标事件或 touch 事件的处理,上图中的浮动框、十字叉都是 div,这样的性能可以接受,而实时修改画布则不流畅。

成交额分析图

成交额分析图的实现基本上没什么难点。

个人非常看好 HTML5。对 HTML5 有兴趣希望参与项目的朋友,请与我联系。

浏览 22
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报