開源Html5版全套股票行情圖 - html54stock
請使用支持html5的瀏覽器查看，推薦使用google chrom或者ipad體驗，ie6，7，8都不支持html5
powered by yukaizhao
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，這樣的性能可以接受，而事實修改畫布則不流暢。
成交額分析圖
交易分析圖
本文由用戶 fmms 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！