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

2012-07-25 07:16:52唐彬

微型電腦應(yīng)用 2012年10期

唐彬

0 引言

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

1 以前常用的方法

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

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

1.1 Adobe Flash

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

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

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

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

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

部分大型 Flash的運(yùn)行和編譯對(duì)計(jì)算機(jī)的性能要求很高；

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

對(duì)Unicode字集的支持不完整；

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

1.2 DIV繪圖

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

DIV繪圖有許多的第三方庫(kù)，并在不少的網(wǎng)站中有所應(yīng)用。但是因?yàn)橐恢贝嬖诘脑颍摲椒ú](méi)有非常廣泛的被應(yīng)用：

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

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

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

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

2 HTML5

2.1 關(guān)于HTML5

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

具體來(lái)說(shuō)，HTML5添加了許多新的語(yǔ)法特征，其中包括

2.2 SVG

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

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

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

而目前為止，Android瀏覽器并不支持 SVG，因此，目前要在Android移動(dòng)平臺(tái)上進(jìn)行HTML5的SVG開(kāi)發(fā)尚不現(xiàn)實(shí)。

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

圖1 HumbleFinance，動(dòng)態(tài)HTML5圖表庫(kù)

2.3 canvas

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

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

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

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

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

2.4 SVG和canvas的比較

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

canvas的特點(diǎn)：

可以進(jìn)行像素級(jí)操作；

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

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

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

SVG的特點(diǎn)：

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

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

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

不可進(jìn)行像素級(jí)操作；

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

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

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

圖3 使用RGraph庫(kù)繪制的線性圖

在圖3的例子中，使用者可以通過(guò)JavaScript完成數(shù)據(jù)的獲取和組織，然后通過(guò)HTML5中的

3 結(jié)束語(yǔ)

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