# Web圖形開發方案選型，SVG/VML/Flash/Applet優劣比較 在Web 項目開發過程中,我們常常會使用到各類圖形,如流程圖，餅圖，甘特圖，散列圖，趨勢圖等等。目前有很多種方法在網頁上繪制圖形， 但是要找到完美的web圖形解決方案是比較難的，只能是根據自己的需要，選擇自己最合適的畫圖方案。 Web 圖表一般有以下幾種做法： 1.使用客戶端控件技術 2.使用服務器端生成圖片 3.使用富客戶端技術 **使用客戶端控件技術** 應用微軟的ActiveX 控件以及Java的applet技術對圖形的支持來顯示一個圖表 。 這種方式顯然對于客戶端要求太高，插件的開發相對麻煩,隨著現在主流瀏覽器放棄對控件的支持后，這種方式只適合一些局域網的應用，而對于因特網的環境就顯得不太適合。被我們所放棄。 **使用服務器端生成圖片** 直接在web服務器端生成好圖表圖片文件后發送給瀏覽器。 圖片技術 由于瀏覽器繪制圖形存在一定困難, 所以在服務端動態生成圖片是一種較好的解決方案。 JFreeChart是JAVA平臺上的一個開放的圖表繪制類庫。可以繪制多種圖表，并且可以產生PNG和JPEG格式的輸出，基本能夠解決目前的圖形方面的需求。 優點: 純JAVA代碼編寫,服務端生成圖形,減輕客戶端負擔。 缺點:? Web 應用時,特別是動態生成圖片,會產生大量的冗余圖片數據。 **使用富客戶端技術** 根據服務器返回數據在瀏覽器端繪制圖表，一般有以下幾種方案： **VML技術** VML相當于IE里面的畫筆，能實現你所想要的圖形，而且結合腳本，可以讓圖形產生動態的效果。VML是微軟1999年9月附帶IE5。0發布的 VML其實是Word和HTML結合的產物。微軟把Word里面的圖形控件結合到IE里面，使IE也具備了繪圖功能。 優點: 基于XML標準，支持高質量的矢量圖形顯示。 結合腳本,可以讓圖形產生動態的效果 缺點: 只能在IE瀏覽器或以IE為內核的瀏覽器才能用VML。 **SVG 技術** SVG(可放縮的矢量圖形)是W3C在2000年8月制定的一種新的二維矢量圖形格式， 優點: 基于XML標準，采用文本來描述對象，具有交互X和動態X, 完全支持DOM 缺點: IE則依賴Adobe Systems的一款插件支持SVG。用戶必須下載、安裝這款插件才能夠在IE中顯示SVG格式圖像。 **多比控件** 多比圖形控件出現簡化了的這種開發難度，它是一款基于Web的矢量圖形控件，能夠檢測瀏覽器類型，自動選擇VML或SVG方案進行做圖， 類似于網頁上的Visio控件，是目前國內外最佳的基于web矢量圖解決方案，可以用于電力、化工、煤炭、工控組態軟件、仿真、地理信息系統、工作流、復雜報表 工業SCADA系統、ERP流程設計系統、圖形管理、圖形拓撲分析、GIS地理信息系統系統、工程制圖等領域。 多比圖形編輯器實現了圖形、圖像和文字的有機統一。它除了支持HTML 中常用的標記,如文本、圖像、鏈接、交互性、CSS的使用、腳本( Scrip t)外,還提供了大量針對圖形、圖像、動畫的特定標記。對SVG圖形文件進行編輯管理的過程為: SVG圖形文件經XML 解析器打開,并在內存中生成一個對象樹,用鼠標事件來驅動腳本執行,腳本通過DOM接口對對象進行相關的操作,來實現圖形繪制、編輯等功能。 **Flash 技術** Open Flash Chart 是一個 Flash 圖表組件，很容易安裝，提供以下語言的API： PHP, Perl, Python, Java, Ruby on Rails, and 。Net 來控制圖表。 優點: 圖形效果好,根據服務器數據生成相應的圖形,可以適當編寫事件處理。 缺點: 需要Flash插件支持,繪制特定的圖形需要專業的flash技術支持。 **Canvas 技術**  <canvas>是一個新的HTML元素，這個元素可以被Script語言(通常是JavaScript)用來繪制圖形。例如可以用它來畫圖、合成圖象、或做簡單的(和不那么簡單的)動畫。 <canvas>最先在蘋果公司(Apple)的Mac OS X Dashboard上被引入，而后被應用于Safari。基于Gecko1。8的瀏覽器， Firefox 1。5，也支持這個新元素。元素<canvas>是WhatWG Web applications 1。0也就是大家都知道的HTML 5標準規范的一部分 優點: 基于標準規范,靈活繪制各類圖形。 缺點:? IE需要使用canvas.js 類支持圖形的擴展。 **JavaScript圖形庫技術 （jsgraphics）** JavaScript圖形庫可在網頁上動態繪制圓、橢圓、斜線、折線、多邊形（包括三角形、矩形）。底層通過創建大量1px*1px的DIV實現，同時對于連續的像素進行了優化，盡量地減少所需的DIV，因此有較好的性能，當然和Java2D、GDI+、OpenGL、DirectX、Flash、SVG、VML及HTML Canvas是無法相比較的。 優點: 使用 Web 的基本技術實現圖形化,不需要任何的擴展或者支持。 缺點: 圖形非矢量，曲線情況下平滑度不夠，圖形較多時性能存在一定的問題。