91网首页-91网页版-91网在线观看-91网站免费观看-91网站永久视频-91网站在线播放

請(qǐng)使用支持html5的瀏覽器查看，推薦使用google chrome或者ipad體驗(yàn)，ie6，7，8都不支持html5

下面是行情圖的快照和每個(gè)圖的實(shí)現(xiàn)難點(diǎn)簡(jiǎn)介，有興趣的朋友請(qǐng)用svn checkout出來(lái)，或者直接訪問(wèn)項(xiàng)目文件看源碼 。

Google code的項(xiàng)目地址是：https://html54stock.googlecode.com

K線圖 滑塊控制

這個(gè)K線圖和flash實(shí)現(xiàn)的K線圖非常接近，滑塊控制是實(shí)現(xiàn)的難點(diǎn)，這里是根據(jù)滑塊滑動(dòng)的位置計(jì)算k線數(shù)據(jù)的范圍，并實(shí)時(shí)重畫(huà)，事實(shí)證明html5 canvas標(biāo)簽的性能還是相當(dāng)?shù)暮玫模赑C機(jī)上每秒可以重畫(huà)20次以上，而在iPad上每秒可以重畫(huà)10次左右，在ipad上流暢性有一定問(wèn)題，所以在ipad上實(shí)現(xiàn)了另外一個(gè)版本，使用手指滑動(dòng)通過(guò)touch相關(guān)的時(shí)間控制范圍

K線圖 觸摸控制

請(qǐng)使用ipad體驗(yàn)效果 

這個(gè)K線圖和上面的基本一樣，但是控制K線范圍改用了觸摸事件，用touchstart,touchmove等事件，這個(gè)需要事實(shí)計(jì)算手指所在的坐標(biāo)，然后根據(jù)坐標(biāo)判斷是否要顯示浮窗，顯示K線柱的高，開(kāi)，低，收等信息。

大分時(shí)圖

分時(shí)圖的實(shí)現(xiàn)是在一張畫(huà)布上，當(dāng)鼠標(biāo)在畫(huà)布上移動(dòng)時(shí)，需要根據(jù)鼠標(biāo)的坐標(biāo)出十字，并顯示鼠標(biāo)所在時(shí)間的價(jià)格，這兒的十字叉是div實(shí)現(xiàn)的，而在畫(huà)布上顯示對(duì)應(yīng)時(shí)間的價(jià)格是用了畫(huà)布的clearRect方法，先把指定區(qū)域的內(nèi)容清除掉，然后再重新畫(huà)上對(duì)應(yīng)價(jià)格。這樣實(shí)現(xiàn)的流暢性非常的好，無(wú)論是在平板上還是在PC上。

小分時(shí)圖

交易分析圖

交易分析圖畫(huà)圖不是難點(diǎn)，難點(diǎn)在于對(duì)鼠標(biāo)事件或touch事件的處理，上圖中的浮動(dòng)框、十字叉都是div，這樣的性能可以接受，而事實(shí)修改畫(huà)布則不流暢。

成交額分析圖

成交額分析圖的實(shí)現(xiàn)基本上沒(méi)什么難點(diǎn)。

個(gè)人非常看好html5。對(duì)html5有興趣希望參與項(xiàng)目的朋友，請(qǐng)與我聯(lián)系。