基于HTML5的3D數(shù)據(jù)可視化

周志豪 董亞則 沈曉偉

（長春工業(yè)大學(xué)應(yīng)用技術(shù)學(xué)院，吉林 長春 130012）

?

基于HTML5的3D數(shù)據(jù)可視化

周志豪 董亞則 沈曉偉

（長春工業(yè)大學(xué)應(yīng)用技術(shù)學(xué)院，吉林 長春 130012）

摘 要：經(jīng)過幾乎8年的艱辛努力，HTML5標(biāo)準(zhǔn)規(guī)范終于制定完成了，伴隨著大量基于瀏覽器的應(yīng)用也日趨龐大，HTML5的出現(xiàn)為數(shù)據(jù)可視化提供了新的實現(xiàn)方法。本文對HTML5的數(shù)據(jù)可視化在瀏覽器的應(yīng)用進(jìn)行研究實踐，并利用HTML5中新生API實現(xiàn)動態(tài)數(shù)據(jù)3D可視化展示。

關(guān)鍵詞：HTML5；數(shù)據(jù)可視化；SVG；Canvas

0. 引言

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

隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，大數(shù)據(jù)時代的到來，人們越來越重視數(shù)據(jù)信息和數(shù)據(jù)分析，海量的數(shù)據(jù)過于龐大不宜直觀分析和統(tǒng)計相關(guān)結(jié)論，在這種環(huán)境下催生了數(shù)據(jù)可視化的發(fā)展，人們把大量的數(shù)據(jù)繪制成圖表甚至模型來直觀地反應(yīng)數(shù)據(jù)帶來的影響和結(jié)果，讓決策者更好地調(diào)整產(chǎn)品和運作方法來改善某些問題和完善產(chǎn)品，數(shù)據(jù)可視化越來越受到大家的重視?；跒g覽器端的web應(yīng)用，由于現(xiàn)代瀏覽器例如IE10、Chrome、FireFox、Safari等都能很好地兼容相應(yīng)屬性而得到迅速推廣。

1. 相關(guān)技術(shù)

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

1.1 SVG

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

1.2 CanvasAPI

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

1.3 SVG和CanvasAPI對比

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

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

表1 SVG和Canvas區(qū)別表

2. 數(shù)據(jù)可視化實現(xiàn)

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

2.1 基于SVG的數(shù)據(jù)可視化工具amCharts.js

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

＜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標(biāo)簽和版本，同時定義了區(qū)域大小，在里面又定義了一個矩形、一個圓形和一段文本，效果如圖2所示。

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

2.2 數(shù)據(jù)可視化模型定義

本文采用面向?qū)ο蠓绞剑幊陶Z言多使用面向?qū)ο蠓椒▉韺?shù)據(jù)進(jìn)行封裝和處理，定義好數(shù)據(jù)集合和可視化對象后在瀏覽器端渲染。

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

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＞

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

3. 數(shù)據(jù)可視化應(yīng)用在成績分析上的實踐

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

結(jié)論

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

參考文獻(xiàn)

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

［2］徐曼.基于HTML5的統(tǒng)計圖表系統(tǒng)的研究與設(shè)計［D］.武漢科技大學(xué)，2012.

支撐課題：國家大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計劃項目201510190007。

中圖分類號：TP39

文獻(xiàn)標(biāo)識碼：A

通信作者：董亞則。