Html5版本的全套股票行情圖開源了,附帶實現(xiàn)技術簡介
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
請使用支持html5的瀏覽器查看,推薦使用google chrome或者ipad體驗,ie6,7,8都不支持html5 下面是行情圖的快照和每個圖的實現(xiàn)難點簡介,有興趣的朋友請用svn checkout出來,或者直接訪問項目文件看源碼 。 Google code的項目地址是:https://html54stock.googlecode.com K線圖 滑塊控制這個K線圖和flash實現(xiàn)的K線圖非常接近,滑塊控制是實現(xiàn)的難點,這里是根據(jù)滑塊滑動的位置計算k線數(shù)據(jù)的范圍,并實時重畫,事實證明html5 canvas標簽的性能還是相當?shù)暮玫?,在PC機上每秒可以重畫20次以上,而在iPad上每秒可以重畫10次左右,在ipad上流暢性有一定問題,所以在ipad上實現(xiàn)了另外一個版本,使用手指滑動通過touch相關的時間控制范圍 K線圖 觸摸控制請使用ipad體驗效果 這個K線圖和上面的基本一樣,但是控制K線范圍改用了觸摸事件,用touchstart,touchmove等事件,這個需要事實計算手指所在的坐標,然后根據(jù)坐標判斷是否要顯示浮窗,顯示K線柱的高,開,低,收等信息。 大分時圖分時圖的實現(xiàn)是在一張畫布上,當鼠標在畫布上移動時,需要根據(jù)鼠標的坐標出十字,并顯示鼠標所在時間的價格,這兒的十字叉是div實現(xiàn)的,而在畫布上顯示對應時間的價格是用了畫布的clearRect方法,先把指定區(qū)域的內(nèi)容清除掉,然后再重新畫上對應價格。這樣實現(xiàn)的流暢性非常的好,無論是在平板上還是在PC上。 小分時圖交易分析圖交易分析圖畫圖不是難點,難點在于對鼠標事件或touch事件的處理,上圖中的浮動框、十字叉都是div,這樣的性能可以接受,而事實修改畫布則不流暢。 成交額分析圖成交額分析圖的實現(xiàn)基本上沒什么難點。
個人非??春胔tml5。對html5有興趣希望參與項目的朋友,請與我聯(lián)系。 該文章在 2012/4/9 9:10:00 編輯過 |
關鍵字查詢
相關文章
正在查詢... |