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

在Web程式中，經常會有從伺服器端資料庫中把資料取出來，在瀏覽器中用各種圖表(折線圖，立方圖，圓餅圖，蠟燭圖)等形式呈現給使用者，這種技術在商業智慧(BI)系統中用的非常廣泛。就其原理來數，主要有如下幾種：1.伺服器端把圖表產生好之後，以JPEG，PNG，GIF圖片等形式返回給瀏覽器端以便顯示。目前用這種方式的有JFreeChart等。2.瀏覽器端載入FLASH的圖形顯示檔案(swf)，很象MFC或者VB中的那種圖形顯示控制項，目前用這種方式的有fusioncharts，OpenFlashChart等等，這種方式產生的圖表相當地酷。3.瀏覽器端用Javascript實現動態畫圖。這種方式主要依賴於HTML的<canvas>標籤，通過canvas的getContext()方式得到畫圖用的上下文(此概念非常類似於MFC中的裝置上下文DC)，然後可以用moveto(),fillRect()
等方式進行繪圖。遺憾的是IE並不支援此標籤，所以通用性不是很好，好在google為我們開發了一個excanvas,不相容的問題得解決。目前用這種方式的有Flot等。4.Adobe提出的<SVG>標籤(Scalable Vector
Graphics),其內部可以置入<rect>的圖形定義用的標籤，用這種方式可以繪製向量圖型，但同樣存在瀏覽器安全色問題。5.用CSS修飾<DIV>等標籤也可以作出一些簡單但非常酷的圖表，目前用這種方式的有FooPlot，Flowchart，nceskids等。6.用Java的Applet來顯示，這是一種淘汰的技術。 當然微軟的Web程式開發陣營應該還有其他的圖表顯示方式(NET圖形顯示控制項？)，但基本沒什麼研究，不敢在此處涉及。