周志豪 董亞則 沈曉偉

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

?

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

周志豪 董亞則 沈曉偉

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

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

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

0. 引言

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

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

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

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

1.1 SVG

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

1.2 CanvasAPI

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

1.3 SVG和CanvasAPI對(duì)比

SVG和Canvas都允許您在瀏覽器中創(chuàng)建圖形，但是它們?cè)诟旧鲜遣煌摹?/p>

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

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

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

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

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

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

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

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

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

本文采用面向?qū)ο蠓绞?，編程語(yǔ)言多使用面向?qū)ο蠓椒▉?lái)對(duì)數(shù)據(jù)進(jìn)行封裝和處理，定義好數(shù)據(jù)集合和可視化對(duì)象后在瀏覽器端渲染。

數(shù)據(jù)集合由后端服務(wù)器提供，從web服務(wù)器返回一段json數(shù)據(jù)，通過(guò)提供的特定API完成對(duì)數(shù)據(jù)源的轉(zhuǎn)化使之能讓可視化對(duì)象可以接收數(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＞

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

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

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

結(jié)論

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

參考文獻(xiàn)

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

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

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

中圖分類號(hào)：TP39

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

通信作者：董亞則。