基于HTML5的3D數據可視化

周志豪 董亞則 沈曉偉

（長春工業大學應用技術學院，吉林 長春 130012）

?

基于HTML5的3D數據可視化

周志豪 董亞則 沈曉偉

（長春工業大學應用技術學院，吉林 長春 130012）

摘 要：經過幾乎8年的艱辛努力，HTML5標準規范終于制定完成了，伴隨著大量基于瀏覽器的應用也日趨龐大，HTML5的出現為數據可視化提供了新的實現方法。本文對HTML5的數據可視化在瀏覽器的應用進行研究實踐，并利用HTML5中新生API實現動態數據3D可視化展示。

關鍵詞：HTML5；數據可視化；SVG；Canvas

0. 引言

數據可視化（Data visualization）是將數據庫中每一個數據項作為單個圖元元素表示，大量的數據集構成數據圖像，同時將數據的各個屬性值以多維數據的形式表示，可以從不同的維度觀察數據，從而對數據進行更深入地觀察和分析。

隨著互聯網技術的不斷發展，大數據時代的到來，人們越來越重視數據信息和數據分析，海量的數據過于龐大不宜直觀分析和統計相關結論，在這種環境下催生了數據可視化的發展，人們把大量的數據繪制成圖表甚至模型來直觀地反應數據帶來的影響和結果，讓決策者更好地調整產品和運作方法來改善某些問題和完善產品，數據可視化越來越受到大家的重視。基于瀏覽器端的web應用，由于現代瀏覽器例如IE10、Chrome、FireFox、Safari等都能很好地兼容相應屬性而得到迅速推廣。

1. 相關技術

HTML通用的網頁標記語言也是萬維網的核心語言，2014年10月29日萬維網聯盟宣布HTML5的規范制定完成，來完善迅速發展的互聯網應用，日常我們所說的HTML5實際上包括了HTML標記、CSS和JavaScript在內的一系列技術，其中HTML5新增了CanvasAPI和內聯SVG的方法，此文就是基于新增的這兩種功能來為數據提供可視化方法。

1.1 SVG

SVG是一種基于XML的可縮放矢量圖形，在操作SVG圖形放大或者改變尺寸時，它的圖形質量沒有損失的都會保留下來。SVG文件相對較小并易于壓縮，這對移動互聯網瀏覽非常重要。

1.2 CanvasAPI

HTML5＜canvas＞標簽用于繪制圖像（通過腳本，通常是JavaScript）。不過canvas元素本身并沒有繪制能力（它僅僅是圖形的容器），必須使用腳本來完成實際的繪圖任務。getContext（）方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性。

1.3 SVG和CanvasAPI對比

SVG和Canvas都允許您在瀏覽器中創建圖形，但是它們在根本上是不同的。

SVG是矢量圖，使用XML格式定義圖形可以通過任何文本編輯器創建，這意味著每個元素都可以進行操作。在SVG中，每個被繪制的圖形均被視為對象，如果對象發生變化，那么瀏覽器需要重新繪制。Canvas是基于像素的即時模式圖形系統，它是通過調用CanvasAPI來進行圖形的繪制，利用javascript進行操作相對簡單，Canvas更新圖片需要重新繪制整張圖。綜合以上SVG和Canvas主要區別總結見表1。

表1 SVG和Canvas區別表

2. 數據可視化實現

基于HTML5數據可視化是借助現代瀏覽器強大的API實現，并依靠后端服務器提供數據，在客戶端實現繪制的可視化技術。數據源可采用數據庫保存，如現在流行的Mysql、oracle等數據庫服務器，數據格式應前后端約定好，依靠web服務器技術向瀏覽器端傳輸數據，本文采用JSON格式作為數據格式。這是一種輕量級的數據格式，它是基于ECMAScript的一個子集，目前大部分瀏覽器端和服務器交互都是基于JSON。瀏覽器接收來自服務器的數據，將數據通過可視化技術進行渲染。由于是現代瀏覽器，這就利于跨平臺的使用，對于平板電腦和智能手機只要安裝現代瀏覽器，一般都會很好地支持HTML5的這兩個功能，就實現了多平臺展示的效果。數據驅動可視化結構如圖1所示。

2.1 基于SVG的數據可視化工具amCharts.js

實現數據可視化需要掌握XML和其他標記語言比如HTML，SVG的元素和屬性必須按標準格式書寫，因為XML是區分大小寫的。SVG里的屬性值必須用引號引起來，就算是數值也必須這樣做。這里是一個基本的示例。

＜svg version="1.1"

baseProfile="full"

width="300" height="200"

xmlns="http：//www.w3.org/2000/ svg"＞

＜rect width="100%" height="100%" fill="red" /＞

＜circle cx="150" cy="100" r="80" fill="green" /＞

＜text x="150" y="125" font-size="60" text-anchor="middle" fill="white"＞SVG＜/ text＞

＜/svg＞

示例中首先定義SVG標簽和版本，同時定義了區域大小，在里面又定義了一個矩形、一個圓形和一段文本，效果如圖2所示。

簡單介紹了SVG的基本用法，不過要實現龐大的圖形繪制需要借助一些工具，本文利用amCharts.js實現數據可視化。amCharts.js是一個基于SVG的JS實現庫，通過搭配HTML5、CSS3和操作DOM實現繪制，同時實現各種操作數據的接口并使用json格式進行數據交互，他還支持所有現代瀏覽器如火狐、谷歌、Safari、Opera等，它還可在IOS（ipad，iphone）和安卓4.0以上系統的移動設備上運行。amCharts.js的很多元素都是基于CSS選擇器，類名可被添加到圖表的每個可視元素，這樣就可以使用CSS或采用CSS動畫來設置圖表樣式。amCharts.js具有強大的序列圖表可以顯示柱狀圖、條形圖、折線圖、面積圖、步線圖、平滑線、燭臺圖和OHLC圖，還可以創建區域范圍、樣條范圍或列范圍圖表。圖表支持多數值軸、對數和扭轉。用戶可以放大、平移圖表，在值和類別軸添加指南，并且序列圖表和XY圖表都支持趨勢線。可以通過JavaScriptAPI創建和管理圖表，或者通過創建JSON對象的所有配置并將它作為參數傳遞給相應方法后創建圖表。

2.2 數據可視化模型定義

本文采用面向對象方式，編程語言多使用面向對象方法來對數據進行封裝和處理，定義好數據集合和可視化對象后在瀏覽器端渲染。

數據集合由后端服務器提供，從web服務器返回一段json數據，通過提供的特定API完成對數據源的轉化使之能讓可視化對象可以接收數據集結果。

var chart；

var chartData=［｛"level"："excellent"，"value"：10｝，｛" level "："middle"，"value"：20｝］；

chart = new AmCharts.AmPieChart（）；

chart.write（"container "）；

＜div id="container" style="width：600px；height：400px；"＞＜/div＞

以上列出的只是部分代碼，可視化對象需要不同的模塊，常規圖形如3D柱狀圖、3D折線圖、3D餅狀圖，可以根據不同的圖形創建不同的容器。首先在html頁面中創建一個div并給id值賦值為container，也就是容器，用來渲染圖形。接著定義一個chart對象，用來描述容器同時創建數據格式，以上面為例，然后定義圖形，這里我們以3D餅狀圖為例，newAmCharts.AmPieChart（）對象，然后就可以通過chart來訪問amchart.js中的API來完成圖形的繪制。

3. 數據可視化應用在成績分析上的實踐

下面本文將采用可視化技術對學生成績分布情況做實踐。本應用將學生成績分為優、良、中、及格、不及格5個等級。通過某次考試成績將這些數據可視化，利用圖形可以更直觀地進行分析。將一個班的60人的成績數據生成一個餅狀圖，結果示例如圖3所示。

結論

通過以上介紹簡單地闡述了HTML5中的CanvasAPI和SVG技術，提供了一種數據可視化方法，利用現代瀏覽器調用相應的API實現圖形的渲染，但必須是基于支持繪圖API的瀏覽器。目前仍然存在部分瀏覽器對HTML5技術不支持，例如IE6、IE7。不過隨著微軟放棄IE以及HTML5標準的制定完成，各大現行主流瀏覽器廠商逐漸完善對Canvas和SVG的支持，HTML5將不再受限。

參考文獻

［1］ Peter Lubber.HTML5程序設計［M］.北京：人民郵電出版社，2012：22-74.

［2］徐曼.基于HTML5的統計圖表系統的研究與設計［D］.武漢科技大學，2012.

支撐課題：國家大學生創新創業訓練計劃項目201510190007。

中圖分類號：TP39

文獻標識碼：A

通信作者：董亞則。