開發日記之瀏覽器端顯示圖表的幾種方法

在Web程序中,經常會有從服務器端數據庫中把數據取出來,在瀏覽器中用各種圖表(折線圖,立方圖,圓餅圖,蠟燭圖)等形式呈現給用戶,這種技術在商業智能(BI)系統中用的非常廣泛。就其原理來數,主要有如下幾種:
1.服務器端把圖表生成好之後,以JPEG,PNG,GIF圖片等形式返回給瀏覽器端以便顯示。目前用這種方式的有JFreeChart等。
2.瀏覽器端加載FLASH的圖形顯示文件(swf),很象MFC或者VB中的那種圖形顯示控件,目前用這種方式的有fusionchartsOpenFlashChart等等,這種方式生成的圖表相當地酷。
3.瀏覽器端用Javascript實現動態畫圖。這種方式主要依賴於HTML的<canvas>標籤,通過canvas的getContext()方式得到畫圖用的上下文(此概念非常類似於MFC中的設備上下文DC),然後可以用moveto(),fillRect() 等方式進行繪圖。遺憾的是IE並不支持此標籤,所以通用性不是很好,好在google爲我們開發了一個excanvas,不兼容的問題得解決。目前用這種方式的有Flot等。
4.Adobe提出的<SVG>標籤(Scalable Vector Graphics),其內部可以置入<rect>的圖形定義用的標籤,用這種方式可以繪製矢量圖型,但同樣存在瀏覽器兼容問題。
5.用CSS修飾<DIV>等標籤也可以作出一些簡單但非常酷的圖表,目前用這種方式的有FooPlotFlowchartnceskids等。
6.用Java的Applet來顯示,這是一種淘汰的技術。
 
當然微軟的Web程序開發陣營應該還有其他的圖表顯示方式(NET圖形顯示控件?),但基本沒什麼研究,不敢在此處涉及。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章