利用HTML5實現(xiàn)網(wǎng)頁圖表的研究

唐 彬

0 引言

目前，越來越多的網(wǎng)絡(luò)應(yīng)用程序開始使用B/S模式，網(wǎng)頁的功能從以前單純的文字、圖片表示的方式，逐漸變得越來越豐富和復(fù)雜，而在網(wǎng)頁中，動態(tài)地顯示復(fù)雜的圖表也越來越多。從網(wǎng)站的實時統(tǒng)計到企業(yè)的月度、年度報表，從常見的的餅圖、柱狀圖，到多個類型的圖形組合或復(fù)雜的數(shù)據(jù)表格，越來越多的圖表，需要在瀏覽器中進行展示。

1 以前常用的方法

web2.0概念流行之前，為了在瀏覽器上根據(jù)數(shù)據(jù)顯示圖表，通常需要為不同的報表內(nèi)容，在服務(wù)器段預(yù)先或臨時生成圖表。以展示某公司過去12個月的銷售報表為例。如果使用靜態(tài)圖表生成的方式，需要預(yù)先根據(jù)數(shù)據(jù)制作12份不同的圖表，放置于服務(wù)器上。如果使用服務(wù)器端的動態(tài)生成方式，則需要通過其他的服務(wù)器程序，在用戶訪問資源的時候臨時生成。前者不夠靈活，難以改動；而后者過于消耗服務(wù)器端資源。

從web2.0概念流行之后，圖表的動態(tài)生成、操作，逐漸從服務(wù)器端移到了客戶端。而利用第三方插件的 Adobe Flash和利用傳統(tǒng) JavaScript進行繪圖，是最常見的兩種方式。

1.1 Adobe Flash

Adobe Flash，前稱Macromedia Flash，簡稱Flash。自從Adobe公司于2005年12月3日收購Macromedia公司，F(xiàn)lash也就成為了 Adobe旗下的軟件。通常情況下，F(xiàn)lash既指Adobe Flash多媒體創(chuàng)作程序，也指通過Flash軟件制作的以.swf格式為主的播放文件，也被用于對播放.swf文件的Adobe Flash Player的稱呼[1]。

Flash Player可以以ActiveX（IE瀏覽器）或plugin（非IE瀏覽器）的形式作為web瀏覽器的擴展，用于在瀏覽器中播放Flash文件。

Flash通常使用矢量圖的方式進行表現(xiàn)，產(chǎn)生出來的動畫和影片占用存儲空間小，因此被大量應(yīng)用于 web網(wǎng)頁的矢量動畫。Adobe公司也基于此平臺提出了“富網(wǎng)絡(luò)應(yīng)用（Rich Internet Application，簡稱RIA）”的概念，并提倡將大量的C/S模式網(wǎng)絡(luò)應(yīng)用向B/S模式移植，因此Flash是最早被用來在網(wǎng)頁中表現(xiàn)圖表的第三方工具之一。

目前，F(xiàn)lash擁有最好的web應(yīng)用的用戶體驗，但是同樣有需要需要解決的問題：

Flash cookies 使用的Flash Player內(nèi)置的SharedObject屬性，和web瀏覽器的cookies無法直接通用；

部分大型 Flash的運行和編譯對計算機的性能要求很高；

大多數(shù)瀏覽器都可以加裝阻擋Flash的插件；

對Unicode字集的支持不完整；

對于設(shè)計有缺陷的Flash應(yīng)用，常發(fā)生內(nèi)存泄露等問題。而基于Flash Player本身的設(shè)計，這些問題常導(dǎo)致瀏覽器的崩潰。

1.2 DIV繪圖

DIV繪圖，是指通過JavaScript在HTML（主要指4.01之前的版本）的DIV標(biāo)簽中繪圖圖形的方式。利用DIV標(biāo)簽的block屬性和CSS設(shè)定，可以將一個矩形的圖形繪制成任何需要的顏色、樣式，并置于web頁面的任何需要的地方。

DIV繪圖有許多的第三方庫，并在不少的網(wǎng)站中有所應(yīng)用。但是因為一直存在的原因，該方法并沒有非常廣泛的被應(yīng)用：

各種瀏覽器對JavaScript和CSS的支持并不統(tǒng)一（這也是HTML5希望解決的問題之一）；

通常第三方庫會封裝繪圖方法，而每個需要繪圖的頁面均需要加載該類庫，增加網(wǎng)頁加載量；

使用JavaScript在DIV中難以繪制出非常復(fù)雜的圖表，只能用于表現(xiàn)簡單的圖形，例如柱狀圖和餅圖等；

DIV作為 web頁面中的元素存在，用戶無法直接保存成圖片；

2 HTML5

2.1 關(guān)于HTML5

眾所周知，HTML是用來描述萬維網(wǎng)（World Wide Web，以下簡稱web）中的內(nèi)容和數(shù)據(jù)的標(biāo)示語言。HTML5是這種標(biāo)示語言的下一個主要修訂版本，現(xiàn)在仍處于發(fā)展階段。目標(biāo)是取代1999年所定制的HTML4.01和XHTML1.0標(biāo)準(zhǔn)【HTML5 for the real world】。其包含了許多新的特性，并對以往的一些舊特性，尤其是基于腳本的 API做了大量的更新，其目的在于，能減少瀏覽器對于需要插件才運行的富網(wǎng)絡(luò)應(yīng)用（RIA，Rich Internet Application，例如 Adobe Flash/Flex），并提供更多能有效增強網(wǎng)絡(luò)應(yīng)用的標(biāo)準(zhǔn)集。[2]

具體來說，HTML5添加了許多新的語法特征，其中包括

2.2 SVG

SVG，英文全稱Scalable Vector Graphics，中文名稱為可縮放矢量圖形。SVG是基于可擴展標(biāo)記語言（XML），用于描述二維矢量圖形的一種圖形格式。SVG由W3C制定，是一個開放標(biāo)準(zhǔn)。

SVG圖像文件可直接讀寫，易于修改和編輯。并且可與現(xiàn)有技術(shù)可以互動融合。同時，SVG圖形格式支持多種濾鏡和特殊效果，在不改變圖像內(nèi)容的前提下，可以實現(xiàn)位圖格式中類似文字陰影的效果 。SVG圖形格式亦可用來動態(tài)生成圖形。例如，可用SVG動態(tài)生成具有交互功能的地圖，嵌入網(wǎng)頁中，并顯示給終端用戶。

雖然SVG 1.0標(biāo)準(zhǔn)于2001年9月4日即由W3C發(fā)布，但是在和Adobe Flash的競爭中處于不利地位，長期以來各瀏覽器對SVG的支持并不理想。到目前為止（2011年8月），支持SVG標(biāo)簽的瀏覽器及最低版本號為[4]：

而目前為止，Android瀏覽器并不支持 SVG，因此，目前要在Android移動平臺上進行HTML5的SVG開發(fā)尚不現(xiàn)實。

HumbleFinance是一個典型的SVG應(yīng)用示例，如圖1所示[6]：

圖1 HumbleFinance，動態(tài)HTML5圖表庫

2.3 canvas

基于HTML5的canvas API，在web頁面上的繪圖能力，不再限制于矩形弧形等簡單的圖形?？梢酝耆ㄟ^JavaScript調(diào)用該API在web頁面上繪制任何需要的圖形。這在某些情況下可以大量的減少在瀏覽網(wǎng)頁時需要下載圖形文件的數(shù)量。通過 canvas可以繪制圖形、圖線、文字、過度填充以圖案等。事實上，canvas提供了一整套用于處理像素圖（位圖，bitmap）甚至視頻的功能[5]。

圖2給出了復(fù)合地基模型試驗中土壓力盒的布置情況。試驗共埋置了10個土壓力盒，在樁頂平面上，樁頂中心、樁間土中心、模型桶邊緣均設(shè)置土壓力盒。同時，樁間土中心、模型桶邊緣處20 cm、40 cm、60 cm深度均設(shè)置土壓力盒，用于測定地基土受壓時不同深度處樁間土、邊緣土的影響。土壓力盒直徑16 mm，厚度4.2 mm。

截止目前為止（2011年8月），支持HTML5 canvas標(biāo)簽的主流web瀏覽器及相應(yīng)的最低版本號為[3]：

Facebook的 Privacy是一種典型的使用 HTML5的canvas在web頁面中繪圖圖表的應(yīng)用，如圖2所示[7]：

圖2 ，F(xiàn)acebook Privacy，基于Prototype開發(fā)的可視化數(shù)據(jù)圖表

2.4 SVG和canvas的比較

SVG和canvas都是HTML5推薦的在web頁面中繪制圖形的方式，但是兩者有著明顯的區(qū)別：

canvas的特點：

可以進行像素級操作；

一次成型，不可以動態(tài)修改。如果要對已有的 canvas進行修改，必須重繪；（canvas使用immediate mode）

不能通過DOM模型訪問canvas中的內(nèi)容；

可以將canvas的內(nèi)容保存成PNG或JPEG文件；

SVG的特點：

可以通過 DOM 模型訪問 SVG的內(nèi)容；（SVG使用retained mode）

目前你可以使用一些工具來生成 SVG（例如 Rapha?l library 和 Inkscape）；

和canvas相比，SVG可被當(dāng)作是一種文件格式而不是一些列用來繪圖的方法；

不可進行像素級操作；

如果使用圖像處理對象來做比較，canvas用于位圖處理；SVG用于矢量圖處理和事件操作等。

2.5 典型的HTML5圖表應(yīng)用

使用JavaScript和HTML5，可以輕松的在網(wǎng)頁中動態(tài)的繪制出用于多種場合的圖表。使用名稱為RGraph[8]的HTML5 JavaScript圖表類庫繪制線性圖的例子，如圖3所示：

圖3 使用RGraph庫繪制的線性圖

在圖3的例子中，使用者可以通過JavaScript完成數(shù)據(jù)的獲取和組織，然后通過HTML5中的標(biāo)簽，動態(tài)的生成該圖。使用JavaScript進行數(shù)據(jù)交互和控制，然后交給HTML5來進行顯示并提供用戶互動操作，是使用HTML5顯示圖表的典型操作方式。在瀏覽器版本滿足需求的情況下，用戶不需要額外安裝其他瀏覽器插件即可查看和使用該圖表。

3 結(jié)束語

隨著對web應(yīng)用的需求越來越高，傳統(tǒng)的B/S應(yīng)用程序和基于第三方插件的 web應(yīng)用開發(fā)，越來越無法應(yīng)付復(fù)雜的web圖形和用戶界面的需求，W3C和眾多國際化組織多年努力完善的新一代HTML標(biāo)準(zhǔn)——HTML5，將帶有更多的用于web圖形處理的標(biāo)簽和API，SVG和canvas在性能和兼容性方面，已經(jīng)超越了現(xiàn)有的流行 RIA技術(shù)，而其表現(xiàn)能力，也在最近幾年得到了長足的進步，雖然在用戶體驗上還有進一步提高的余地，但是其所帶有的強大的生命力，將勢必引起新的一輪web應(yīng)用開發(fā)技術(shù)的革新。

[1]維基百科 Adobe Flash詞條：[OL]http://zh. wikipedia.org/wiki/ Adobe_Flash

[2]維基百科 HTML5詞條：[OL]http://zh.wikipedia.org/wiki/ HTML5

[3]《HTML5 & CSS3 for the real world》Alexis Goldstein,Louis[M]Lazaris, Estelle Weyl 著,2011年出版。

[4]W3C SVG規(guī)格說明。[OL]http://www.w3.org/TR/2003/REC-SVG11-20030114/

[5]《Introducing HTML5 》[M]Bruce Lawson and Remy Sharp著,2011年出版。

[6]http://www.humblesoftware.com/finance/index

[7]http://mattmckeon.com/facebook-privacy/

[8]http://www.rgraph.net