基于Web的實時數(shù)據(jù)圖形顯示模塊研究

高川 劉寶華

摘? 要： 互聯(lián)網(wǎng)與物聯(lián)網(wǎng)的興起使得各行各業(yè)進入數(shù)據(jù)化管理模式，企業(yè)對于信息管理系統(tǒng)、數(shù)據(jù)實時監(jiān)控有著迫切的需要。在大前端時代，軟件開發(fā)體系多采用B/S結構，數(shù)據(jù)的呈現(xiàn)在前端設計中愈發(fā)重要，而現(xiàn)有圖形框架對實時數(shù)據(jù)圖形繪制時存在圖形縮放現(xiàn)象。為解決這一現(xiàn)象，文中以可縮放矢量圖形（SVG）為核心，以實時數(shù)據(jù)圖形繪制為重要對象，研究和建立輕量級圖形顯示模塊。結合企業(yè)實際應用證明文中模塊有效避免縮放現(xiàn)象的出現(xiàn)。文中模塊研究對與Web圖形繪制具有良好的借鑒意義。

關鍵詞： 前端;圖形;模塊

中圖分類號： TP391. 092 ???文獻標識碼： A??? DOI：10.3969/j.issn.1003-6970.2020.07.035

本文著錄格式：高川，劉寶華. 基于Web的實時數(shù)據(jù)圖形顯示模塊研究[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? 引言

在互聯(lián)網(wǎng)與物聯(lián)網(wǎng)的綜合背景下，信息化推動數(shù)字化發(fā)展，而數(shù)字化則進一步推動了數(shù)據(jù)化的發(fā)展。數(shù)據(jù)化以數(shù)據(jù)分析為切入點，通過數(shù)據(jù)發(fā)現(xiàn)問題、分析問題、解決問題，打破傳統(tǒng)的經(jīng)驗驅(qū)動決策的方式，實現(xiàn)科學決策。其特性使得企業(yè)邁向數(shù)據(jù)化管理，最直觀的便是企業(yè)數(shù)據(jù)采集系統(tǒng)。

大前端時代下，企業(yè)數(shù)據(jù)采集系統(tǒng)由傳統(tǒng)C/S結構轉向B/S結構。傳統(tǒng)web圖表展示功能實現(xiàn)依靠服務端處理并形成圖表，進而依據(jù)動態(tài)網(wǎng)頁技術如ASP、JSP等技術生成帶有圖表的HTML文件發(fā)送至前端。傳統(tǒng)B/S體系過分對服務器過分依賴，對于高并發(fā)、數(shù)據(jù)處理量較大的網(wǎng)頁請求無疑會對服務器產(chǎn)生較大的負載，甚至造成服務器崩潰等現(xiàn)象。隨著以JavaScript為代表的前端技術快速發(fā)展以及各大主流瀏覽器內(nèi)核的不斷維護與完善，B/S體系開發(fā)出現(xiàn)前后端分離的發(fā)展趨勢。前后端分離技術極大范圍內(nèi)縮小服務器任務量，減小服務器負載，同時也標志著基于B/S體系的軟件開發(fā)模式 進入大前端時代，數(shù)據(jù)可視化也逐漸成為前端開發(fā)者的主要任務，圖表的應用在圖形繪制過程中愈發(fā)重要^[1]。

目前web主流圖表模塊為Echarts與Highcharts。對于靜態(tài)數(shù)據(jù)展示各模塊均含有豐富的圖表樣式以及響應性，可基本滿足企業(yè)數(shù)據(jù)展示的各式要求。而對于在企業(yè)數(shù)據(jù)采集系統(tǒng)中必不可少的實時監(jiān)控數(shù)據(jù)展示，目前的主流框架主要存在問題為動態(tài)實時數(shù)據(jù)繪圖時的縮放現(xiàn)象。

縮放現(xiàn)象是指在繪制時間數(shù)據(jù)圖時，當固定坐標系時間軸方向可容納的數(shù)據(jù)數(shù)量，而持續(xù)獲取到的實時數(shù)據(jù)總長度不滿時間軸容量時，產(chǎn)生類似圖形壓縮的現(xiàn)象。

鑒于動態(tài)圖表在企業(yè)數(shù)據(jù)采集系統(tǒng)中的廣泛應用及數(shù)據(jù)可視化在前端發(fā)展的廣闊前景，本文將從方案設計與實現(xiàn)原理兩方面進行闡述，設計并實現(xiàn)輕量級多接口的圖形顯示模塊，有效避免現(xiàn)有圖形模塊對于實時數(shù)據(jù)繪制產(chǎn)生的縮放現(xiàn)象，為前端實時數(shù)據(jù)圖形繪制提供一定的借鑒作用。

1 ?方案設計

1.1 ?SVG與Canvas選擇

Web圖表的繪制分為兩種，HTML5的Canvas和XML的SVG。主要區(qū)別為^[2]。

（1）與分辨率的關系。Canvas繪制圖像為位圖，與分辨率相關;SVG為矢量圖，與分辨率無關。矢量圖在圖形放大后不失真。

（2）與事件處理器的關系。Canvas所繪制的點無法捕捉，如需添加響應事件只可通過判斷鼠標坐標點與目標點是否重合。而SVG繪制的圖像當做HTML結構中的一部分，可直接添加事件響應。

（3）與搜索引擎的關系。Canvas繪制的圖像可抽象理解為一張圖片，無法解析圖片的數(shù)據(jù)。而SVG的圖像數(shù)據(jù)會清晰解構在HTML結構中，在搜索引擎中可查看SVG圖像的具體數(shù)據(jù)。

考慮到SVG圖表的不失真特性、事件響應便捷促進模塊開發(fā)多功能性、HTML解析便于開發(fā)者對模塊進行二次開發(fā)。在模塊設計中采用基于SVG方案進行圖形繪制開發(fā)。

1.2? 圖形區(qū)域組件化分割

組件化思想是UI界面設計所不可或缺的設計基礎，基于組件化思想可提高系統(tǒng)開發(fā)效率，增加系統(tǒng)靈活性、復用性等。

圖形模塊所繪制的圖表按功能分割成四大塊區(qū)域，分別為。

（1）圖形展示區(qū)域。負責數(shù)據(jù)波形繪制、x與y軸網(wǎng)格線繪制以及單個數(shù)據(jù)點詳細信息展示等功能。

（2）x軸區(qū)域。負責x軸標題、x軸刻度及版權信息顯示。

（3）y軸區(qū)域。負責y軸標題及y軸刻度顯示。

（4）圖表標題區(qū)域。負責圖表標題、作者信息及備注信息展示。

每一塊區(qū)域在開發(fā)中設計為獨立的子組件，組件化分割將完整圖表分割成獨立子組件，便于模塊開發(fā)的分治，同時組件化分割帶來模塊調(diào)用時的功能分割，即每一區(qū)域?qū)粋€對象，對各區(qū)域?qū)ο蟮牟煌O置可達到不同的圖形樣式效果。

區(qū)域分割圖如圖1所示。

1.3 ?響應式設計

響應式布局在2010年首次提出，可兼容不同分辨率設備，相比傳統(tǒng)固定布局方式擁有更好的交互體驗?；陧憫降脑O計已成為前端開發(fā)的新模式。

通過響應式設計的圖形頁面或模塊具有較強的“彈性化”^[3]。頁面布局元素可依據(jù)容器尺寸自動調(diào)整，實現(xiàn)不同設備的最優(yōu)適配解決方案^[4-5]。響應式的實現(xiàn)方法有媒體查詢、流失布局等^[6]。本文中模塊在響應式方面的設計主要體現(xiàn)在以下四點。

（1）模塊寬高自適應容器。在模塊創(chuàng)建時會根據(jù)開發(fā)者提供的父元素容器ID，獲取父元素的寬高，使模塊自動充滿整個父元素。

（2）圖形高度自適應。圖形繪制時動態(tài)判斷圖形的高度，自動拉伸并充滿圖形展示區(qū)域高度。

（3）圖形寬度自適應。圖形繪制時，若模塊模式選擇非固定x軸長度模式，則模塊會根據(jù)圖形的長度動態(tài)拉伸充滿圖形展示區(qū)域?qū)挾取?/p>

（4）標題位置自適應。x軸標題、y軸標題、圖表標題在圖表創(chuàng)建時動態(tài)居中顯示。

1.4 ?實時波形顯示設計

對于實時波形的顯示方案，目前眾多流行框架都采用同一種方式。以Highcharts框架為例，由于無法獲知實時波形的長度，在圖形繪制時，x軸長度的確定有兩種方案。

（1）根據(jù)接收到的第一次數(shù)據(jù)長度為默認x軸長度，此后接收到的數(shù)據(jù)在保證圖形長度滿足x軸長度的前提下，繪制圖形時產(chǎn)生從右向左滑動的動畫顯示效果。

（2）初始化指定長度空數(shù)據(jù)固定x軸長度，此后實時數(shù)據(jù)到來時先進行空數(shù)據(jù)的替換，再進行從右向左的動畫顯示效果。而由于圖形的響應式效果，在數(shù)據(jù)填充空數(shù)據(jù)階段，為保證圖形充滿圖形展示區(qū)域，會產(chǎn)生圖形的縮放現(xiàn)象。

若要避免縮放現(xiàn)象的出現(xiàn)，可通過初始化無效數(shù)據(jù)（如值為0的數(shù)據(jù)）固定x軸長度即圖形繪制首屏全0或全無效。但此方法對于用戶而言可能會造成數(shù)據(jù)誤讀情況，即無效數(shù)據(jù)被當做實際數(shù)據(jù)。

為徹底解決縮放現(xiàn)象，在模塊設計中提出新的較符合人為習慣、便于理解的圖形繪制方案。在圖形創(chuàng)建時可自由固定x軸長度，在圖形繪制時由左向右繪圖，如圖2所示。當圖形充滿x軸長度時產(chǎn)生從右向左的動畫顯示效果。

2 ?實現(xiàn)原理

2.1 ?網(wǎng)頁圖形的顯示原理

SVG使用XML格式定義圖形，每個被繪制的圖形均被視為對象，如果對象發(fā)生變化，瀏覽器需要重新繪制^[7]。SVG在網(wǎng)頁中以標簽形式存在，因此可對SVG繪制圖形進行事件綁定等操作，并可通過更改標簽的屬性值顯示不同圖形。HTML5出現(xiàn)后把常用的SVG標簽采納為HTML標準^[8]。

本文中的模塊在設計中主要使用到的SVG元素見表1。

2.2 ?響應式實現(xiàn)原理

為滿足模塊設計在網(wǎng)頁中基于不同設備環(huán)境自動響應和調(diào)整^[9]。模塊采用動態(tài)填充容器尺寸，不固定內(nèi)部尺寸大小，百分比布局，滿足不同設備下的布局穩(wěn)定性。對于標題長度的不同，模塊自動獲取標題長度進行居中顯示。

模塊圖形尺寸與標題定位的響應式工作流程如圖3所示。

2.3 ?實時波形繪制實現(xiàn)原理

實時波形設計采用數(shù)據(jù)監(jiān)聽與數(shù)據(jù)追加的方式添加至圖形中，產(chǎn)生從右向左的滑動效果。數(shù)據(jù)追加方式是值當獲取新數(shù)據(jù)時，向數(shù)據(jù)容器進行push操作，若數(shù)據(jù)容器已滿則將容器中較早數(shù)據(jù)點進行排出操作。

JavaScript中的對象含有描述數(shù)據(jù)屬性和描述訪問器屬性，通過調(diào)用definePreperty函數(shù)，修改訪問器屬性的set屬性，即可在對象賦值時調(diào)用圖形繪制所需函數(shù)，從而達到數(shù)據(jù)監(jiān)聽效果。

數(shù)據(jù)監(jiān)聽的部分代碼如下。

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 ?開發(fā)者接口列表

軟件的開發(fā)不得不考慮其數(shù)據(jù)接口的應用，其主要目標在于實現(xiàn)應用范圍的靈活度，以及相應操作能力的便捷性^[10-11]。

模塊設計過程中，提供大量接口供模塊調(diào)用時使用，以下列出模塊調(diào)用時的主要接口，如表2所示。

由于接口大多具有默認值，模塊調(diào)用時可設置各別接口即可完成圖形繪制。模塊調(diào)用時可采用單例模式調(diào)用或構造函數(shù)調(diào)用。如下代碼樣例供開發(fā)者調(diào)用參考。

charts.create（‘container， {

title： ‘單例模式調(diào)用，

type： ‘remote-data，//靜態(tài)圖形繪制

src： ‘...，

xAxisLength： auto，

xCalDefaultCount：5}）

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

title： ‘構造函數(shù)調(diào)用動態(tài)數(shù)據(jù)，

type： ‘live-data，//動態(tài)圖形繪制

src： ‘...，

pollintTime：1000，

xCalDefaultCount： 5，

xAxisType： ‘time}）

2.5 ?返回對象解析

模塊調(diào)用后生成構造者為charts.create的對象。開發(fā)者可通過控制該對象對圖形進行交互性操作，如圖形某點的詳細數(shù)據(jù)展現(xiàn)、圖形尺寸的動態(tài)改變等。

對返回對象進行解析，屬性如表3所示。

2.6 ?模塊壓縮

數(shù)據(jù)壓縮一直是前端頁面優(yōu)化的優(yōu)先選擇，對文件進行壓縮可減小網(wǎng)絡傳輸量，提高頁面的渲染速度。

模塊針對動態(tài)數(shù)據(jù)圖形展示功能進行抽離，并調(diào)用Webpack Uglyfy插件對代碼進行丑化壓縮操作，壓縮后大小僅為11KB，同時通過構造函數(shù)調(diào)用方式對模塊進行調(diào)用，調(diào)用過程對全局環(huán)境零輸出，真正實現(xiàn)模塊的輕量級以及對全局環(huán)境的零污染。

3? 實際應用

上海一公司為全國多個鋼廠設計的軋鋼數(shù)據(jù)web監(jiān)控系統(tǒng)中多次應用本文所設計的模塊，圖4所示為監(jiān)控系統(tǒng)實時數(shù)據(jù)繪制的全過程（為便于觀察，圖片已進行二值化處理）。圖表設置固定顯示長度為10分鐘的數(shù)據(jù)圖形。圖形繪制起始階段，由于數(shù)據(jù)長度未滿設定容量，模塊自動關閉圖形展示區(qū)域的響應式設計，禁止圖形的自動拉伸占滿容器等操作。以數(shù)據(jù)攜帶時間點為x坐標值進行圖形的展現(xiàn)。當所獲取數(shù)據(jù)長度超過設定容量時，模塊開啟圖形滾動效果，以由右向左的滾動方向進行圖形的動態(tài)展示。

由圖4可以看出該模塊在使用過程中有效避免縮放現(xiàn)象的出現(xiàn)，同時圖像自動變換y軸刻度和圖像大小也反映出該模塊具有較好的響應性。

4? 結論

本文設計的基于Web實時數(shù)據(jù)圖形顯示模塊具有輕量級，多接口和較好的響應性，利用SVG特性，模塊圖形頁面簡潔，不失真。經(jīng)實際應用驗證，該模塊可有效解決目前已有框架帶來的動態(tài)數(shù)據(jù)圖形繪制縮放現(xiàn)象。由于數(shù)據(jù)的廣泛應用性，此后還需對該模塊進行圖形類型擴展，如3D類圖形、餅狀圖等。

參考文獻

1. 駱宇豪. 基于SPA模式的高性能移動端可交互圖表系統(tǒng)的研究與實現(xiàn)[D]. 湖南大學， 2016.

2. 呂杰英， 陸凌燕. 網(wǎng)站設計中客戶端圖表技術的應用研究——以世界技能大賽賽題為例[J]. 信息系統(tǒng)工程， 2017（12）： 83-85.

3. 劉志東， 陳天偉. 基于Bootstrap的響應式網(wǎng)頁設計與實現(xiàn)[J]. 電腦知識與技術， 2017， 13（7）： 85-87+73.

4. 郭彥輝. 響應式Web設計的研究與實現(xiàn)[J]. 軟件， 2018， 39（1）： 169-172.

5. 呂媛媛， 李可. 移動端應用設計中的響應式實現(xiàn)方法[J]. 軟件， 2016， 37（2）： 107-109.

6. 蘇奎， 董默， 張彥超. 響應式Web開發(fā)模式分析[J]. 軟件， 2015， 36（6）： 92-96.

7. 周志豪， 董亞則， 沈曉偉. 基于HTML5的3D數(shù)據(jù)可視化[J]. 中國新技術新產(chǎn)品， 2016（14）： 34-35.

8. 高國弘， 緱曉輝， 高愷寧. 基于MUI前端框架繪制天氣預報APP[J]. 電腦編程技巧與維護， 2019（10）： 56-60.

9. 臧進進， 鄂海紅. 基于響應式Web設計的網(wǎng)頁生成系統(tǒng)研究與實現(xiàn)[J]. 軟件， 2015， 36（6）： 37-41.

10. 蒲寶卿. 計算機軟件數(shù)據(jù)接口的應用[J]. 電子技術與軟件工程， 2017（14）： 46-47.

11. 呂梅， 趙元鵬. CIM模型下序網(wǎng)電路及其數(shù)據(jù)接口開發(fā)[J]. 軟件， 2015， 36（8）： 137-143.