数据可视化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）。科学计算可视化能够把数据测量的数值、图像还有计算当中产生的数字信息，跟以图形和图像为代表的、不断变化的物理现象生动展现在研究者面前，让研究者更好完成研究工作[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标签用于在网页实时生成图像并且可以操作图像内容。基本上可以把Canvas看成一个可以用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