html54stock 正在参加 2020 年度 OSC 中国开源项目评选,请投票支持!
html54stock 在 2020 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
投票让它出道
已投票
授权协议: LGPL
开发语言: JavaScript HTML/CSS
操作系统: 跨平台
收录时间: 2012-03-14
提 交 者: 甄码农

请使用支持 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 有兴趣希望参与项目的朋友,请与我联系。

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

html54stock 的相关资讯

还没有任何资讯

html54stock 的相关博客

备忘

https://code.google.com/p/html54stock/

备忘

https://code.google.com/p/html54stock/ 在线ascii转换工具

评论 (13)

加载中
打分: 力荐
http://u6.gg/e4pt3 猿之神 github流畅访问,各种库,包管理无限制 油管1080-4k流畅播放
2018/09/05 16:53
回复
举报
对这个项目很感兴趣,一起交流一下 QQ 393831579
2017/09/07 12:08
回复
举报
有没有可以分享的开源代码,新手求带
2017/04/11 10:21
回复
举报
一起探讨啊 QQ : 29968071
2017/04/01 17:34
回复
举报
打分: 推荐
太棒了。朋友有机会交流一下,求联系方式
2017/03/17 14:19
回复
举报
在哪下载啊请问?
2017/01/06 18:02
回复
举报
打分: 推荐
我对此项目非常感兴趣,QQ:48630597
2016/12/25 14:52
回复
举报
希望有详细的使用说明 html54stock
2014/05/27 08:55
回复
举报
怎样查看源代码 html54stock
2014/08/15 17:09
回复
举报
你好,我对你这个项目很有兴趣,可以什么时候详细聊聊吗? html54stock
2015/01/19 16:09
回复
举报
更多评论
13 评论
285 收藏
分享
返回顶部
顶部