基于html5的客戶端圖表生成方案

1、基于html5的客戶端圖表生成方案添加評論 2010年7月5日 iefans -隨著瀏覽器廠商對互聯(lián)網(wǎng)瀏覽器思路的改進(jìn)，從而誕生了HTML標(biāo)準(zhǔn)的原型，通過這幾年的發(fā)展HTML標(biāo)準(zhǔn)已經(jīng)到第五代。近期用HTML5取代Flash或Shockwave的呼聲越來越高。雖然HTML5將會對互聯(lián)網(wǎng)的很多方面做出改進(jìn)，使網(wǎng)站具備更豐富的功能、讓互聯(lián)網(wǎng)訪問變得更加安全和高效。但距離HTML5成為標(biāo)準(zhǔn)還有很長的差距，目前包含IE在內(nèi)的主流瀏覽器對HTML5的支持還不是完美，不過值得我們期待的是，新一代的IE9、Chrome 6、Firefox4等瀏覽器都已經(jīng)開始全面的擴(kuò)展對HTML5的支持。下文主要是介紹基于ht

2、ml5的客戶端圖表生成方案。筆者嘗試過很多種圖表生成方案，比較有代表性的： 服務(wù)器端生成圖表方案，比如通過jfreechart； 使用云計算的方式，比如通過google提供的chart api，可以參見使用google chart生成動態(tài)圖； 使用flash的免費(fèi)開源應(yīng)用，比如fusioncharts，在瀏覽器端生成圖表，效果可見：/free/demos/ 使用html5的canvas api在瀏覽器端生成圖表。其中前兩者是通過服務(wù)器端生成的，后兩者是通過客戶端生成的。服務(wù)器端的缺點(diǎn)是： 圖表缺乏交互性，比如折線圖，鼠標(biāo)放在某個點(diǎn)上，希望看到

3、該點(diǎn)的值，就做不到； 帶寬和流量問題，比如通過手機(jī)訪問，手機(jī)是按流量計費(fèi)的，對服務(wù)器端也會有影響，當(dāng)大規(guī)模訪問的時候擠占服務(wù)器端帶寬； 服務(wù)器端性能，當(dāng)大規(guī)模訪問的時候服務(wù)器端生成圖表性能下降?？蛻舳松蓤D表就沒有服務(wù)器端的問題，但是存在另外的問題，主要是終端適配問題： flash的解決方案，無法在手機(jī)瀏覽器中顯示，起碼目前情況是這樣的，android 2.2版本的設(shè)備還很少，iphone是肯定不會支持； html5的方案，無法在主流的ie瀏覽器中顯示，至少要等到ie9推出以后，估計要等到2011年了。目前的html5方案，還沒有在效果上能超過flash的。但是是趨勢，因?yàn)闉g覽器內(nèi)置了（除了i

4、e）本地支持，不依賴flash的插件。將來的覆蓋終端更多。因此選擇了基于html5的RGraph：/。使用RGraph的準(zhǔn)備工作下載beta版本，我沒有下載stable版本，因?yàn)楣倬W(wǎng)上的demo就是用的beta版本。在自己web項(xiàng)目根目錄下，建一個js目錄，用于存放javascript腳本，把rgraph的libraries目錄和excanvas目錄下的文件全部復(fù)制過去，另外就是復(fù)制rgraph的css目錄到該目錄下。你當(dāng)然可以按照rgraph的目錄結(jié)構(gòu)做，這沒有問題。編寫最簡單的RGraph使用示例這是一個比較丑陋的圖表，但是說明問題，可以直接訪問：h

5、ttp://svn/tags/rgraph.demo-1.0.0/basic.html當(dāng)然，必須使用支持html5的瀏覽器，比如chrome或者firefox。和其他js類庫使用方式類似，首先需要引入js庫：然后，在html的body部分，需要展示圖表的地方，聲明canvas元素：No canvas support最后，編寫js代碼：window.onload = function ()var bar = new RGraph.Bar(myBar, 12,13,16,15,16,19,19,12,23,16,13,24);bar.Set(char

6、t.gutter, 55);bar.Set(chart.colors, blue);bar.Set(chart.title, 一個簡單的柱狀圖);bar.Set(chart.labels, 一月, 二月, 三月, 四月, 五月, 六月, 七月, 八月, 九月, 十月, 十一月, 十二月);bar.Draw();帶交互能力的條形圖把鼠標(biāo)放在具體的條塊上，會反灰，顯示文字，這和flash解決方案類似了，可以提供交互的能力。示例見：/svn/tags/rgraph.demo-1.0.0/barchart.html帶標(biāo)注和交互能力的折線圖比如

7、，這里標(biāo)注了紅色折線的最大值和最小值，鼠標(biāo)放在某點(diǎn)上，會顯示該點(diǎn)的標(biāo)數(shù)。示例見：/svn/tags/rgraph.demo-1.0.0/linechart.html值得注意的是，該圖片是可以另存的。帶交互的餅圖這里面的數(shù)據(jù)是不真實(shí)的，隨便寫的?？梢允髽?biāo)點(diǎn)擊讓當(dāng)前部分立體浮現(xiàn)。示例見：/svn/tags/rgraph.demo-1.0.0/piechart.html進(jìn)度條這個進(jìn)度條也會很有用，比如顯示動態(tài)的進(jìn)度?；蛘呤且恍┲笜?biāo)的動態(tài)監(jiān)控。示例見：http:/easymorse.

8、/svn/trunk/rgraph.demo/progress_bar.html箱型圖在股票方面大概叫k線圖。隨便瞎畫的，因?yàn)榘巢欢善?，估計畫的不對，就是演示了一下樣子。示例見?svn/trunk/rgraph.demo/box_plots.html結(jié)論使用RGraph對比服務(wù)器端生成圖表的優(yōu)點(diǎn)是： 節(jié)約帶寬； 減少服務(wù)器負(fù)擔(dān)，生成圖表的負(fù)擔(dān)； 服務(wù)器端開發(fā)變的簡單，只需傳輸數(shù)據(jù)即可； 支持交互功能，目前可能還不如flash的一些成熟解決方案，但是因?yàn)槭菢?biāo)準(zhǔn)和開放的，會逐步增強(qiáng)。和flash解決方案的比較： 支持主要智能手機(jī)系統(tǒng)，iphone和android，可以在智能手機(jī)應(yīng)用程序中使用本地頁面，數(shù)據(jù)通過http從服