數(shù)據(jù)可視化Web應用技術(shù)舉例

陳益全　劉強

摘? 要： 文章通過介紹多種當前主流的數(shù)據(jù)可視化Web應用技術(shù)的技術(shù)特點及使用方式，舉例說明使用主流的Web可視化圖形庫進行數(shù)據(jù)可視化設計不僅能提高開發(fā)效率，也能給用戶提供更好的體驗。以此為數(shù)據(jù)可視化應用和研究提供參考。

關(guān)鍵詞： 大數(shù)據(jù); 數(shù)據(jù)可視化; Web; 應用

中圖分類號：TP399? ? ? ? ? 文獻標識碼：A? ? ?文章編號：1006-8228（2022）03-57-04

Abstract： This paper introduces the technical characteristics and application methods of a variety of current mainstream Web application technologies for data visualization， to show with examples that using the mainstream web visualization graphics library for data visualization design can not only improve the development efficiency， but also provide users with a better experience， which provides a reference for the application and research of data visualization.

Key words： big data; data visualization; Web; application

0 引言

人類社會已經(jīng)邁進大數(shù)據(jù)時代。人們在生產(chǎn)生活過程中產(chǎn)生大量數(shù)據(jù)，這些海量數(shù)據(jù)也越來越受到重視。大數(shù)據(jù)通過詳細分析，能挖掘出所需的信息、規(guī)律、知識和智慧。當大數(shù)據(jù)以直觀的視覺圖形形式呈現(xiàn)時，就能讓人們高效地獲取到各方面信息，這就是數(shù)據(jù)可視化的典型應用領域。數(shù)據(jù)可視化就是將數(shù)據(jù)轉(zhuǎn)換為易于人們辨識和理解的視覺表現(xiàn)形式。在科學、工程、商業(yè)、管理等方面，數(shù)據(jù)可視化技術(shù)已經(jīng)得到長足發(fā)展和廣泛應用。本文從可視化技術(shù)的相關(guān)理論和Web數(shù)據(jù)可視化應用技術(shù)等方面展開論述，為從事數(shù)據(jù)可視化相關(guān)工作的人員進行應用和研究提供參考。

1 可視化技術(shù)相關(guān)理論

可視化技術(shù)是從計算機圖形學中發(fā)展起來的。計算機圖形學的主要研究內(nèi)容是研究如何在計算機中表示圖形、以及利用計算機進行圖形的計算、處理和顯示的相關(guān)原理與算法[1]。

可視化技術(shù)經(jīng)歷了三個主要階段，第一個階段是科學計算可視化，第二階段是信息可視化，第三個階段中，這就是科學計算可視化（visualization in scientific computation），也稱為科學可視化（scientific visualization）?？茖W計算可視化能夠把數(shù)據(jù)測量的數(shù)值、圖像還有計算當中產(chǎn)生的數(shù)字信息，跟以圖形和圖像為代表的、不斷變化的物理現(xiàn)象生動展現(xiàn)在研究者面前，讓研究者更好完成研究工作[2]。信息可視化（Information visualization）是對抽象數(shù)據(jù)進行直觀視覺呈現(xiàn)的研究，抽象數(shù)據(jù)既包含數(shù)值數(shù)據(jù)（如財務報表、經(jīng)濟數(shù)據(jù)、股票數(shù)據(jù)等），也包含非數(shù)值數(shù)據(jù)（如文本信息、地圖信息、商標信息等）。信息可視化是綜合圖形圖像處理、人機交互、人工智能、心理學、社會科學等交叉學科的研究領域[3]。數(shù)據(jù)可視化（Data visualization）是關(guān)于數(shù)據(jù)之視覺表現(xiàn)形式的研究。數(shù)據(jù)可視化主要旨在借助于圖形化手段，清晰有效地傳達與溝通信息。為了有效地傳達思想概念，美學形式與功能都需要兼顧到，從而實現(xiàn)對于相當稀疏而又復雜的數(shù)據(jù)集的深入洞察[4]。

2 數(shù)據(jù)可視化Web技術(shù)舉例

Web頁面是用戶獲取信息的主要入口，它也是數(shù)據(jù)可視化內(nèi)容呈現(xiàn)和交互的主要載體。數(shù)據(jù)可視化Web應用技術(shù)實現(xiàn)有多種路線可供選擇，如圖1所示。了解這些技術(shù)將對數(shù)據(jù)可視化開發(fā)起到積極作用。

2.1 Skia與OpenGL

Skia繪圖引擎是Google Chrome瀏覽器和Android系統(tǒng)的底層2D向量圖形處理函數(shù)庫。它采用的是C++編程方式，包括字體、坐標轉(zhuǎn)換以及點陣等功能，具有高效、簡潔的性能。Skia是跨平臺的，開發(fā)者不用操心平臺相關(guān)的渲染特性。也就是說，Skia保證了同一套代碼調(diào)用在Android，iOS，Mac，Web，Windows等平臺上渲染圖像效果是一致的。

OpenGL（Open Graphics Library）是一個功能強大、調(diào)用方便的底層圖形庫，它定義了跨編程語言、跨平臺的專業(yè)圖形程序編程接口，可用于2D或3D圖像的處理與渲染。因此，支持OpenGL的軟件具有很好的移植性，并獲得非常廣泛的應用[5]。

Skia和OpenGL作為底層的圖形庫，在實際的Web數(shù)據(jù)可視化開發(fā)過程中可以不使用它們進行編程，因為Web瀏覽器對它們進行了封裝并向上層的應用層開放了它們的繪圖能力，像Canvas、SVG、WebGL等的繪圖能力是能夠通過編寫一些簡單的代碼就可以進行繪圖，而不需要去了解底層的一些繪圖細節(jié)。

2.2 Canvas與SVG

Canvas是HTML5的一個新特性，能夠允許用戶使用Canvas元素在網(wǎng)頁上通過加載JavaScript來繪制圖像。即Canvas標簽用于在網(wǎng)頁實時生成圖像并且可以操作圖像內(nèi)容?；旧峡梢园袰anvas看成一個可以用JavaScript操作的位圖（bitmap）。

SVG（Scalable Vector Graphics）是一種基于XML的圖像文件格式。SVG可以提供高質(zhì)量的矢量圖形渲染，圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失。同時由于支持JavaScript和文檔對象模型，SVG圖形具有強大的交互能力[6]。

Canvas與SVG都是Web繪圖技術(shù)，但兩者還是在多方面存在著區(qū)別，如表1所示。

2.3 WebGL

WebGL（Web Graphics Library）是一種3D的繪圖協(xié)議，可以為HTML5的Canvas提供硬件3D加速的渲染能力，Web開發(fā)人員能夠通過Canvas拿到一個WebGL的實例，在通過WebGL實例直接使用顯卡的3D加速功能，使得Web開發(fā)人員可以借助系統(tǒng)顯卡在瀏覽器里面流暢地展示3D的場景和模型。

WebGL完美地解決了現(xiàn)有的Web交互式三維動畫的兩個問題：第一，它通過HTML腳本本身實現(xiàn)Web交互式三維動畫的制作，無需任何瀏覽器插件支持;第二，它利用底層的圖形硬件加速功能進行的圖形渲染，是通過OpenGL接口實現(xiàn)的[7]。

WebGL程序包括使用JavaScript寫的控制代碼，以及在GPU（raphics Processing Unit）G）中執(zhí)行的圖形處理代碼（OpenGL的著色語言GLSL）。WebGL元素可以和其他HTML元素混合使用，并且可以和網(wǎng)頁其他部分或者網(wǎng)頁結(jié)合起來。

2.4 Zrender

Zrender是一個輕量級的2D繪圖引擎，它提供Canvas、SVG、VML等多種渲染方式。ZRender提供了將近20種圖形類型，而且提供給開發(fā)者自由擴展圖形的機制。ZRender使用MVC模式封裝，實現(xiàn)了“圖形倉庫”、“視圖渲染”和“交互控制”。其中，Stroage（M）數(shù)據(jù)管理層負責shape數(shù)據(jù)CURD管理;Painter（V）視圖層負責Canvas及其周邊DOM元素的創(chuàng)建與處理、調(diào)用各個Shape（預定義好的）進行繪制并提供基本的操作方法（包括：渲染、刷新、尺寸變化、擦除等）。Handler（C）控制層負責事件交互處理，實現(xiàn)完整DOM事件模擬封裝[8]。

2.5 D3

D3（Data-Driven Document）表示的是一個數(shù)據(jù)驅(qū)動的DOM。它能夠通過有數(shù)據(jù)驅(qū)動的方式來改變DOM的顯示。D3是一個Javascript圖形庫，支持高度可定制和交互式的基于Web的數(shù)據(jù)可視化。它基于Canvas、SVG和HTML。D3可以實現(xiàn)很多矢量的圖形。

D3不論是做多復雜的圖形，都能夠通過一種數(shù)據(jù)驅(qū)動方式及拿到數(shù)據(jù)更新到這種方式來進行實現(xiàn)。D3允許開發(fā)者將任意數(shù)據(jù)綁定在文檔對象模型（DOM）之上，然后再應用數(shù)據(jù)驅(qū)動轉(zhuǎn)換到文檔中。例如，開發(fā)者可以使用D3從一個數(shù)組生成一個HTML表格，或者使用同樣的數(shù)據(jù)來創(chuàng)建一個帶有平滑過渡和互動功能的交互式SVG柱狀圖。D3并非一個旨在涵蓋所有功能特征的整體框架，相反，D3解決的問題核心是：基于數(shù)據(jù)的高效文檔操作，提供了非凡的靈活性。D3的速度非?？欤С执笮蛿?shù)據(jù)集以及交互與動畫的動態(tài)行為。并且D3的函數(shù)風格允許通過各種組件和插件的形式進行代碼的重用[9]。D3的編程流程是：首先把輸入的原始數(shù)據(jù)轉(zhuǎn)化成為標準的D3可接受的數(shù)據(jù)格式，接著根據(jù)原始數(shù)據(jù)定義好x軸函數(shù)、y軸函數(shù)和定義好作圖方式（如d3.line），然后在SVG上面畫出x軸y軸、根據(jù)原始數(shù)據(jù)結(jié)合x軸及y軸函數(shù)作線狀圖，再畫出標題等細節(jié)的東西，最后，給已經(jīng)完成的圖形添加動畫效果。

2.6 Three.js

Three.js是一個JavaScript的3D圖形庫，底層采用WebGL進行3D圖形的繪制。但WebGL只是非?；A的繪圖API，需要編程人員有很多的數(shù)學知識、繪圖知識才能完成3D編程任務，而且代碼量巨大。Threejs對WebGL進行了封裝，讓前端開發(fā)人員在不需要掌握很多數(shù)學知識和繪圖知識的情況下，也能夠輕松進行Web 3D開發(fā)，降低了門檻，同時大大提升了效率[10]。Three.js的編程流程是：首先設置Three.js環(huán)境，為其提供一個Canvas繪制元素。然后創(chuàng)建一個場景，添加內(nèi)容，并渲染。結(jié)果輸出到提供的Canvas中。如果要為場景設置動畫而不是單個靜態(tài)圖像，需要使用添加動畫循環(huán)，以及保留對添加到場景中的模型的引用，以便可以在幀之間移動它們。

2.7 Echarts

ECharts是一款開源的基于JavaScript的數(shù)據(jù)可視化圖表庫，可以流暢的運行在PC和移動設備上，兼容當前絕大部分瀏覽器。它底層依賴矢量圖形庫ZRender，支持超過12類圖表，同時提供7個功能靈活高效的可交互組件，支持多圖表、組件的聯(lián)動和混搭展現(xiàn)，創(chuàng)新的拖拽重計算、數(shù)據(jù)視圖、值域漫游等特性大大增強了用戶體驗，賦予了用戶對數(shù)據(jù)進行挖掘、整合的能力，可以呈現(xiàn)出直觀，生動，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表[11]。正因為ECharts的優(yōu)良特性，它的應用場景廣泛，是熱門的前端數(shù)據(jù)可視化圖表庫。ECharts的編程流程是：首先引入Echarts;接著為ECharts準備一個具備高寬的DOM容器;然后指定圖表的配置項和數(shù)據(jù);最后用指定的配置項和數(shù)據(jù)渲染圖表。其核心代碼是圖表參數(shù)配置，包括坐標軸（xAxis、yAxis）、圖例以及數(shù)據(jù)（series）都在這里設置，并使用dataset組件來實現(xiàn)單獨的數(shù)據(jù)集聲明。舉例如下：

option={

legend：{}，

tooltip：{}，

dataset：{ //dataset提供數(shù)據(jù)。

source：[

['product'， '2018'， '2019'， '2020']，

['phone'， 44.3， 63.8， 85.7]，

['pad'， 22.1， 31.4， 39.1]，

['computer'， 20.4， 35.2， 42.5]，

]

}，

xAxis：{type：'category'}， //聲明一個 X 軸，類目軸（category）。

默認情況下，類目軸對應到dataset第一列。

yAxis：{}，//聲明一個Y軸，數(shù)值軸。

series：[ //聲明多個bar系列，默認情況下，每個系列會自動

對應到dataset的每一列。

{type： 'bar'}，

{type： 'bar'}，

{type： 'bar'}

]

}

3 結(jié)束語

實現(xiàn)數(shù)據(jù)可視化有多種Web應用技術(shù)選擇。本文通過對當前多種主流的數(shù)據(jù)可視化Web應用技術(shù)介紹舉例，說明其各自的技術(shù)特點及使用方式。使用主流的圖形庫進行數(shù)據(jù)可視化設計不僅能提高開發(fā)效率也能給用戶提供更好的體驗。在與全息投影、虛擬現(xiàn)實（VR）、增強現(xiàn)實（AR）、混合現(xiàn)實（MR）等技術(shù)結(jié)合后，數(shù)據(jù)可視化web應用技術(shù)的發(fā)展前景將更加廣闊。接下來將在性能調(diào)優(yōu)問題上做進一步研究。

參考文獻（References）：

[1] 柳海蘭.淺談計算機圖形學的發(fā)展及應用[J].電腦知識與技術(shù)，2010，6（33）：9551-9552

[2] 牛振州.Windows運行過程的可視化研究[D].山東大學，2010

[3] 付心儀，劉世霞，徐迎慶.信息可視化的發(fā)展與思考[J].裝飾，2017（4）：16-19

[4] 鄭晨.基于數(shù)據(jù)可視化技術(shù)實現(xiàn)橋梁綜合數(shù)據(jù)分析[J].山東交通科技，2020（4）：113-115

[5] 鄭晨.基于數(shù)據(jù)可視化技術(shù)實現(xiàn)橋梁綜合數(shù)據(jù)分析[J].山東交通科技，2020（4）：113-115

[6] 黃浩生，王云鵬.視覺無損的SVG空間矢量數(shù)據(jù)壓縮算法[J].計算機工程與應用，2013，49（12）：8-10，15

[7] 王洋.TalentBase HCM的組織結(jié)構(gòu)信息數(shù)據(jù)可視化系統(tǒng)設計與實現(xiàn)[D].東北大學，2016

[8] TechFE.ECharts 3.0底層zrender 3.x源碼分析1-總體架構(gòu)[EB/OL].[2021-08-26].https：//blog.csdn.net/future_todo/article/details/54341386

[9] 掌燈夜行. 幾種數(shù)據(jù)可視化框架分析[EB/OL].（2016-12-04）[2021-08-26].https：//blog.csdn.net/dao_wolf/article/details/53453735.

[10] 王凱.基于多維度數(shù)據(jù)可視化方法的家裝平臺系統(tǒng)設計與研究[D].江蘇科技大學，2020

[11] ECHARTS. Echarts中文文檔：特性[EB/OL].[2021-08-26].https：//echarts.apache.org/zh/feature.html.

3075501908227