數據可視化Web應用技術舉例

陳益全　劉強

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

關鍵詞： 大數據; 數據可視化; 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 引言

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

1 可視化技術相關理論

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

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

2 數據可視化Web技術舉例

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

2.1 Skia與OpenGL

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

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

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

2.2 Canvas與SVG

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

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

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

2.3 WebGL

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

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

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

2.4 Zrender

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

2.5 D3

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

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

2.6 Three.js

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

2.7 Echarts

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

option={

legend：{}，

tooltip：{}，

dataset：{ //dataset提供數據。

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軸，數值軸。

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

對應到dataset的每一列。

{type： 'bar'}，

{type： 'bar'}，

{type： 'bar'}

]

}

3 結束語

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

參考文獻（References）：

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

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

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

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

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

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

[7] 王洋.TalentBase HCM的組織結構信息數據可視化系統設計與實現[D].東北大學，2016

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

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

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

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

3075501908227