基于HTML5的圖形化網頁數據展示

楊帆

摘 要：在HTML4的時代，如果要將各種數據圖表在互聯網上展示出來，辦法并不多。HTML、CSS+Javascript的展示能力，不管是從性能還是功能方面來說，都十分有限。這個時候Flash出現了，頓時千樹萬樹梨花開，互聯網時代迎來了多媒體時代，數據展示組件基于Flash也是大放異彩。但是Flash由于效率問題，功耗較高，還有文件尺寸偏大，語言獨立不易學的問題。今天，HTML5來了，讓我來用HTML5的新增功能Canvas技術實現一個漂亮的餅圖控件，來為大家介紹HTML5在圖形化網頁數據展示方面的優勢。

關鍵詞：HTML5；數據展示；組件；Canvas；Javascript

1 Canvas介紹

HTML5中，對圖形化網頁數據展示影響最大的就要數Canvas了。本文接下來會對Canvas 2D模式進行介紹，并使用Canvas 2D實現一個餅狀圖的數據展示組件。在實現中，為節省篇幅，本文假設讀者對Javascript和HTML都有一定的了解，將僅對Canvas相關部份進行重點講解。

在介紹Canvas 2D之前，讓我們先找一個餅狀圖的組件，并以它作為我們實現的目標：

百度搜到這個餅狀圖，看起來效果不錯，我們來嘗試實現它。

2 實現思路與具體實現

觀察這個餅狀圖，最直觀可以看到的就是它的黑色背景。我們要畫餅狀圖，要先把它的背景畫出來，那么如何在Canvas中畫一個大大的黑色方框呢？首先我們必須在頁面中有Canvas元素。即，之后，我們用js調用這個元素的getContext（“2d”）來獲得2d的繪圖上下文（注意2d的d必須是小寫），之后我們就可以使用這個上下文來進行繪圖了。在Canvas中，繪制矩形的方法是使用fillRect（x，y，w，h）方法，矩形的填充顏色使用fillStyle屬性來設置。其中x，y是要繪制矩形的坐標，而w，h是要繪制矩形的寬度與高度。在Canvas的坐標系中，以Canvas元素的左上角為0，0，X軸向右延伸，Y軸向下延伸。所以要畫一個400x400的矩形，代碼如上。

效果：

成功！終于把背景完成了。下面我們來畫餅，整個的餅圖其實是由多個扇形組成的。在canvas的2d上下文中，畫扇形的方式是使用“路徑”功能，一個路徑其實就是一個形狀，想像一下有一個筆尖在畫布上落下，這兒便是形狀的起點，隨著你的移動筆尖，線條就會出現在畫布上，當你決定想完成這個形狀的時候，從筆尖的當前位置，到形狀的起點畫一條直線，關閉形狀區域，這個形狀就畫好了。在Canvas的繪圖API中，并沒有畫圓的方法，只能畫一定弧度的弧線，但我們可以畫2π弧度的弧來畫圓。Canvas畫弧線的API如下：

arc（x，y，r，a1，a2，b）

其中：x，y為圓弧的圓心，r為圓弧半徑，a1為起始弧度，a2為終止弧圖，b為布爾值，代表畫弧方向，b為true時代表逆時針畫弧，b為false時代表順時針畫弧。Canvas畫弧時以X軸正向（右方）為0度。

在Canvas API中，開始一個新的形狀路徑的API是openPath（），閉合一個形狀的API是closePath（）；移動畫筆，不進行繪畫的API是moveTo（x，y），x，y為要移動畫筆的目的坐標。從畫筆當前坐標畫一條線到x，y的API為lineTo（x，y）。Canvas中填充畫好的形狀的API是fill（），使用的顏色仍然是fillStyle屬性。了解了這些，跟據圖3中我們的設計。很容易可以畫出我們的第一個弧。按我們這個思路，如果我們要畫一個圓心坐標在200，200，半徑為100，角度為30度（π/6）的黃色扇形，代碼如下：

再看下效果：

現在，我們即會畫矩形，也會畫扇形了，我們當然也可以用這些扇形拼成一個圓。那么為了實現餅狀圖控件，我們現在唯一缺少的Canvas技術就是文字的顯示了。

Canvas 2d上下文API中，和文字相關的內如有以下幾個：

fillStyle屬性：代表要繪制的文字顏色

font屬性：要繪制的字體與字號。例值：”9px Arial”。字體為Arial，字號為9px

textBaseline屬性：要繪制的字體與指定坐標的位置關系，值與效果如下圖：

shadowColor屬性：填充陰影顏色。

shadowOffsetX屬性：填充陰影X偏移。

shadowOffsetY屬性：填充陰影Y偏移。

fillText方法：fillText（text，x，y）。text為要繪制的文字內容，x，y為要繪制的坐標。

新增代碼如下：

效果：

致此，完成一個餅圖所需要的Canvas知識我們已經完全掌握了。控件封裝的設計部份略過，直接帖一下這個餅圖完成的最終效果：

在完成稿里面，我們為了美觀，對邊緣做了虛化處理。這是怎么做的呢？其實，fillStyle并不是僅僅可以填寫具體的顏色，fillStyle還可以賦值為一個暫變。我們通過設置漸變，讓顏色填充在邊緣時迅速由本色向背景色（黑色）漸變，即實現了這種效果。相關代碼如下：

最后把所有相關代碼附上：

⑴HTML文件：

⑵JS文件（yfchart.js）

按我們的靈活設計，其實要換膚的話也十分容易。yfchart.js完全不需要修改，只需要修改html中對餅圖控件引用的部份代碼即可。修改后代碼如下（即去掉黑底皮膚定義部份）：

效果如下：

3 總結與展望

從以上介紹和實例可以看出，使用HTML5做數據展示非常簡單。只要短短的百行代碼即可實現一個支持皮膚換膚和任意數據內容的餅圖控件。并且效果也是比較好的。實際上，HTML5可以做的遠遠不止于此。在數據展示方面，HTML5對現代設備支持的非常好，比如觸摸屏，蛇螺儀等等，使用這些功能，我們可以做出用手指和圖表交互的功能，也可以做出一個3維的數據世界，你拿著支持HTML5的移動設備，就像拿著一扇窗戶一樣，隨著設備的移動，通過屏幕看到的數據也是不同的。這些都是HTML5可以做到的神奇功能。除此之外，HTML5的本地存儲，Web worker等功能甚至允許我們在前端做一些數據的統計和計算工作，而不是簡單的什么都交給后臺。

按HTML5的現狀來看，使用HTML5做數據展示已經完全可以做的比Flash更好，且功能會比Flash更加強大。希望可以通過這篇文章讓更多的人關注HTML5，使用HTML5，讓我們的開發變的更簡單，效果更好。

[參考文獻]

[1]David Flanagan，著，淘寶前端團隊，譯.Javascript權威指南David Flanagan，Javascript：The Definitive Guide.

[2]Nicholas C.Zakas著，曹力，張欣，等，譯.Javascript高級程序設計. Nicholas C.Zakas，Professional Javascript for Web Developers.

[3]秀野堂主，蔣宇捷，羅睿，編著.論道HTML5.Xiu Yetangzhu，Jiang Yujie，Luo Rui，The way to HTML5.

[4]w3c.http：//www.w3.org/TR/REC-html32.

[5]w3c.http：//www.w3.org/TR/REC-html40/.