基于Web的實時數據圖形顯示模塊研究

高川 劉寶華

摘? 要： 互聯網與物聯網的興起使得各行各業進入數據化管理模式，企業對于信息管理系統、數據實時監控有著迫切的需要。在大前端時代，軟件開發體系多采用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類圖形、餅狀圖等。

參考文獻

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

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

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

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

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

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

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

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

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

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

11. 呂梅， 趙元鵬. CIM模型下序網電路及其數據接口開發[J]. 軟件， 2015， 36（8）： 137-143.