基于Web的实时数据图形显示模块研究

2020-12-24高川刘宝华

软件 2020年7期

高川刘宝华

摘要：互联网与物联网的兴起使得各行各业进入数据化管理模式，企业对于信息管理系统、数据实时监控有着迫切的需要。在大前端时代，软件开发体系多采用B/S结构，数据的呈现在前端设计中愈发重要，而现有图形框架对实时数据图形绘制时存在图形缩放现象。为解决这一现象，文中以可缩放矢量图形（SVG）为核心，以实时数据图形绘制为重要对象，研究和建立轻量级图形显示模块。结合企业实际应用证明文中模块有效避免缩放现象的出现。文中模块研究对与Web图形绘制具有良好的借鉴意义。

关键词：前端;图形;模块

中图分类号： TP391. 092 文献标识码： A DOI：10.3969/j.issn.1003-6970.2020.07.035

本文著录格式：高川，刘宝华. 基于Web的实时数据图形显示模块研究[J]. 软件，2020，41（07）：174-178

Research on Real-time Data Graph Display Module Based on Web

GAO Chuan， LIU Bao-hua

（College of Mechanical Engineering， Yanshan University， Qinhuangdao 066000， China）

【Abstract】： With the rise of the Internet and the Internet of things， all walks of life have entered the digital management mode， and enterprises have an urgent need for information management system and real-time data monitoring. In the era of large front-end， the software development system mostly adopts B/S structure， and the presentation of data becomes more and more important in front-end design. However， the graph scaling phenomenon exists when the existing graphics framework draws the real-time data graph. In order to solve this problem， this paper takes scalable vector graphics （SVG） as the core and real-time data graphics rendering as an important object to study and build a lightweight graphics display module. Combined with the actual application of the enterprise， it is proved that the module in this paper can effectively avoid the phenomenon of scaling. The module research in this paper has a good reference significance for Web graphics rendering.

【Key words】： Front-end; Chart; Module

0 引言

在互聯网与物联网的综合背景下，信息化推动数字化发展，而数字化则进一步推动了数据化的发展。数据化以数据分析为切入点，通过数据发现问题、分析问题、解决问题，打破传统的经验驱动决策的方式，实现科学决策。其特性使得企业迈向数据化管理，最直观的便是企业数据采集系统。

大前端时代下，企业数据采集系统由传统C/S结构转向B/S结构。传统web图表展示功能实现依靠服务端处理并形成图表，进而依据动态网页技术如ASP、JSP等技术生成带有图表的HTML文件发送至前端。传统B/S体系过分对服务器过分依赖，对于高并发、数据处理量较大的网页请求无疑会对服务器产生较大的负载，甚至造成服务器崩溃等现象。随着以JavaScript为代表的前端技术快速发展以及各大主流浏览器内核的不断维护与完善，B/S体系开发出现前后端分离的发展趋势。前后端分离技术极大范围内缩小服务器任务量，减小服务器负载，同时也标志着基于B/S体系的软件开发模式进入大前端时代，数据可视化也逐渐成为前端开发者的主要任务，图表的应用在图形绘制过程中愈发重要^[1]。

目前web主流图表模块为Echarts与Highcharts。对于静态数据展示各模块均含有丰富的图表样式以及响应性，可基本满足企业数据展示的各式要求。而对于在企业数据采集系统中必不可少的实时监控数据展示，目前的主流框架主要存在问题为动态实时数据绘图时的缩放现象。

缩放现象是指在绘制时间数据图时，当固定坐标系时间轴方向可容纳的数据数量，而持续获取到的实时數据总长度不满时间轴容量时，产生类似图形压缩的现象。

鉴于动态图表在企业数据采集系统中的广泛应用及数据可视化在前端发展的广阔前景，本文将从方案设计与实现原理两方面进行阐述，设计并实现轻量级多接口的图形显示模块，有效避免现有图形模块对于实时数据绘制产生的缩放现象，为前端实时数据图形绘制提供一定的借鉴作用。

1 方案设计

1.1 SVG与Canvas选择

Web图表的绘制分为两种，HTML5的Canvas和XML的SVG。主要区别为^[2]。

（1）与分辨率的关系。Canvas绘制图像为位图，与分辨率相关;SVG为矢量图，与分辨率无关。矢量图在图形放大后不失真。

（2）与事件处理器的关系。Canvas所绘制的点无法捕捉，如需添加响应事件只可通过判断鼠标坐标点与目标点是否重合。而SVG绘制的图像当做HTML结构中的一部分，可直接添加事件响应。

（3）与搜索引擎的关系。Canvas绘制的图像可抽象理解为一张图片，无法解析图片的数据。而SVG的图像数据会清晰解构在HTML结构中，在搜索引擎中可查看SVG图像的具体数据。

考虑到SVG图表的不失真特性、事件响应便捷促进模块开发多功能性、HTML解析便于开发者对模块进行二次开发。在模块设计中采用基于SVG方案进行图形绘制开发。

1.2 图形区域组件化分割

组件化思想是UI界面设计所不可或缺的设计基础，基于组件化思想可提高系统开发效率，增加系统灵活性、复用性等。

图形模块所绘制的图表按功能分割成四大块区域，分别为。

（1）图形展示区域。负责数据波形绘制、x与y轴网格线绘制以及单个数据点详细信息展示等功能。

（2）x轴区域。负责x轴标题、x轴刻度及版权信息显示。

（3）y轴区域。负责y轴标题及y轴刻度显示。

（4）图表标题区域。负责图表标题、作者信息及备注信息展示。

每一块区域在开发中设计为独立的子组件，组件化分割将完整图表分割成独立子组件，便于模块开发的分治，同时组件化分割带来模块调用时的功能分割，即每一区域对应一个对象，对各区域对象的不同设置可达到不同的图形样式效果。

区域分割图如图1所示。

1.3 响应式设计

响应式布局在2010年首次提出，可兼容不同分辨率设备，相比传统固定布局方式拥有更好的交互体验。基于响应式的设计已成为前端开发的新模式。

通过响应式设计的图形页面或模块具有较强的“弹性化”^[3]。页面布局元素可依据容器尺寸自动调整，实现不同设备的最优适配解决方案^[4-5]。响应式的实现方法有媒体查询、流失布局等^[6]。本文中模块在响应式方面的设计主要体现在以下四点。

（1）模块宽高自适应容器。在模块创建时会根据开发者提供的父元素容器ID，获取父元素的宽高，使模块自动充满整个父元素。

（2）图形高度自适应。图形绘制时动态判断图形的高度，自动拉伸并充满图形展示区域高度。

（3）图形宽度自适应。图形绘制时，若模块模式选择非固定x轴长度模式，则模块会根据图形的长度动态拉伸充满图形展示区域宽度。

（4）标题位置自适应。x轴标题、y轴标题、图表标题在图表创建时动态居中显示。

1.4 实时波形显示设计

对于实时波形的显示方案，目前众多流行框架都采用同一种方式。以Highcharts框架为例，由于无法获知实时波形的长度，在图形绘制时，x轴长度的确定有两种方案。

（1）根据接收到的第一次数据长度为默认x轴长度，此后接收到的数据在保证图形长度满足x轴长度的前提下，绘制图形时产生从右向左滑动的动画显示效果。

（2）初始化指定长度空数据固定x轴长度，此后实时数据到来时先进行空数据的替换，再进行从右向左的动画显示效果。而由于图形的响应式效果，在数据填充空数据阶段，为保证图形充满图形展示区域，会产生图形的缩放现象。

若要避免缩放现象的出现，可通过初始化无效数据（如值为0的数据）固定x轴长度即图形绘制首屏全0或全无效。但此方法对于用户而言可能会造成数据误读情况，即无效数据被当做实际数据。

为彻底解决缩放现象，在模块设计中提出新的较符合人为习惯、便于理解的图形绘制方案。在图形创建时可自由固定x轴长度，在图形绘制时由左向右绘图，如图2所示。当图形充满x轴长度时产生从右向左的动画显示效果。

2 实现原理

2.1 网页图形的显示原理

SVG使用XML格式定义图形，每个被绘制的图形均被视为对象，如果对象发生变化，浏览器需要重新绘制^[7]。SVG在网页中以标签形式存在，因此可对SVG绘制图形进行事件绑定等操作，并可通过更改标签的属性值显示不同图形。HTML5出现后把常用的SVG标签采纳为HTML标准^[8]。

本文中的模块在设计中主要使用到的SVG元素见表1。

2.2 响应式实现原理

为满足模块设计在网页中基于不同设备环境自动响应和调整^[9]。模块采用动态填充容器尺寸，不固定内部尺寸大小，百分比布局，满足不同设备下的布局稳定性。对于标题长度的不同，模块自动获取标题长度进行居中显示。

模块图形尺寸与标题定位的响应式工作流程如图3所示。

2.3 实时波形绘制实现原理

实时波形设计采用数据监听与数据追加的方式添加至图形中，产生从右向左的滑动效果。数据追加方式是值当获取新数据时，向数据容器进行push操作，若数据容器已满则将容器中较早数据点进行排出操作。

JavaScript中的对象含有描述数据属性和描述访问器属性，通过调用definePreperty函数，修改访问器属性的set属性，即可在对象赋值时调用图形绘制所需函数，从而达到数据监听效果。

数据监听的部分代码如下。

If （！this.hasPwnProperty（‘dataSource）） {

let value

Object.defineProperty（this， ‘dataSource，{

get （） {return value}，

set （newValue） {

value = newValue

showChart.call（this）

}，

enumerable： false，

configurable： false

}）

}

2.4 开发者接口列表

软件的开发不得不考虑其数据接口的應用，其主要目标在于实现应用范围的灵活度，以及相应操作能力的便捷性^[10-11]。

模块设计过程中，提供大量接口供模块调用时使用，以下列出模块调用时的主要接口，如表2所示。

由于接口大多具有默认值，模块调用时可设置各别接口即可完成图形绘制。模块调用时可采用单例模式调用或构造函数调用。如下代码样例供开发者调用参考。

charts.create（‘container， {

title： ‘单例模式调用，

type： ‘remote-data，//静态图形绘制

src： ‘...，

xAxisLength： auto，

xCalDefaultCount：5}）

const chartObj = new charts.create（‘container， {

title： ‘构造函数调用动态数据，

type： ‘live-data，//动态图形绘制

src： ‘...，

pollintTime：1000，

xCalDefaultCount： 5，

xAxisType： ‘time}）

2.5 返回对象解析

模块调用后生成构造者为charts.create的对象。开发者可通过控制该对象对图形进行交互性操作，如图形某点的详细数据展现、图形尺寸的动态改变等。

对返回对象进行解析，属性如表3所示。

2.6 模块压缩

数据压缩一直是前端页面优化的优先选择，对文件进行压缩可减小网络传输量，提高页面的渲染速度。

模块针对动态数据图形展示功能进行抽离，并调用Webpack Uglyfy插件对代码进行丑化压缩操作，压缩后大小仅为11KB，同时通过构造函数调用方式对模块进行调用，调用过程对全局环境零输出，真正实现模块的轻量级以及对全局环境的零污染。

3 实际应用

上海一公司为全国多个钢厂设计的轧钢数据web监控系统中多次应用本文所设计的模块，图4所示为监控系统实时数据绘制的全过程（为便于观察，图片已进行二值化处理）。图表设置固定显示长度为10分钟的数据图形。图形绘制起始阶段，由于数据长度未满设定容量，模块自动关闭图形展示区域的响应式设计，禁止图形的自动拉伸占满容器等操作。以数据携带时间点为x坐标值进行图形的展现。当所获取数据长度超过设定容量时，模块开启图形滚动效果，以由右向左的滚动方向进行图形的动态展示。

由图4可以看出该模块在使用过程中有效避免缩放现象的出现，同时图像自动变换y轴刻度和图像大小也反映出该模块具有较好的响应性。

4 结论

本文设计的基于Web实时数据图形显示模块具有轻量级，多接口和较好的响应性，利用SVG特性，模块图形页面简洁，不失真。经实际应用验证，该模块可有效解决目前已有框架带来的动态数据图形绘制缩放现象。由于数据的广泛应用性，此后还需对该模块进行图形类型扩展，如3D类图形、饼状图等。

参考文献