劉喜鳳, 王志堅,2, 葉 楓,2

(1.河海大學(xué) 計算機(jī)與信息學(xué)院，南京 211100； 2.南京航空航天大學(xué) 計算機(jī)科學(xué)與技術(shù)學(xué)院，南京 210016)

水利系統(tǒng)服務(wù)的可視化技術(shù)研究與應(yīng)用

劉喜鳳1, 王志堅1,2, 葉 楓1,2

(1.河海大學(xué) 計算機(jī)與信息學(xué)院，南京 211100； 2.南京航空航天大學(xué) 計算機(jī)科學(xué)與技術(shù)學(xué)院，南京 210016)

水利信息化系統(tǒng)通常是數(shù)據(jù)密集型系統(tǒng)，對防汛預(yù)警等業(yè)務(wù)的數(shù)據(jù)實時查詢要求高。當(dāng)前，應(yīng)用于水利系統(tǒng)的圖形可視化技術(shù)還需要克服操作復(fù)雜，實現(xiàn)過程繁瑣、效率低、缺乏通用性和可操作性等問題。利用可視化評估準(zhǔn)則，對比當(dāng)前流行的幾種可視化技術(shù)，著重分析其渲染功能和使用性能，實驗驗證ECharts不僅能滿足水利系統(tǒng)對業(yè)務(wù)數(shù)據(jù)進(jìn)行快速、高效的展示的需求，而且簡單適用，方便操作。結(jié)合水利系統(tǒng)智慧滁河管理項目，提出一種基于ECharts可視化工具的水利系統(tǒng)開發(fā)模型，為水利系統(tǒng)可視化提供技術(shù)支持和科學(xué)依據(jù)。

可視化技術(shù)； 可視化應(yīng)用； 數(shù)據(jù)可視化； 水利系統(tǒng)

1 引言

可視化技術(shù)是數(shù)據(jù)分析的重要方面。若能一目了然地掌握業(yè)務(wù)數(shù)據(jù)的規(guī)律和趨勢，對進(jìn)一步挖掘數(shù)據(jù)背后的信息具有重要作用。在水利信息化應(yīng)用中，由于水文、降雨、水質(zhì)等業(yè)務(wù)數(shù)據(jù)種類眾多，數(shù)據(jù)密集，所需的展現(xiàn)方式多樣，加大了可視化難度。因此，如何實現(xiàn)對業(yè)務(wù)數(shù)據(jù)界面友好、方便快捷展示，以交互方式形象生動地展示給用戶，輔助用戶分析數(shù)據(jù)發(fā)現(xiàn)規(guī)律，對于防汛防旱、水安全等工作的作用重大[1]。本文提出一種基于可視化工具ECharts的水利系統(tǒng)開發(fā)模型。通過實驗分析對比多種可視化技術(shù)，所采用的方法不僅可以提高對水文信息的利用率，同時提升用戶的工作效率以及管理水平。實現(xiàn)更高效、更便捷地水利信息化查詢。

2 研究現(xiàn)狀

數(shù)據(jù)可視化是關(guān)于數(shù)據(jù)視覺表現(xiàn)形式的科學(xué)技術(shù)研究，其基本思想據(jù)的各個屬性值以多維數(shù)據(jù)的形式表示，可以從不同的維度觀察數(shù)據(jù)，從而對數(shù)據(jù)進(jìn)行更深入的觀察和分析。隨著計算機(jī)技術(shù)的發(fā)展，數(shù)據(jù)可視化技術(shù)也越來越高級，利用圖形圖像處理，計算機(jī)視覺以及用戶界面，通過建模、表達(dá)以及對屬性、表面、立體等展示，實現(xiàn)對數(shù)據(jù)加以可視化解釋。

對于一個數(shù)據(jù)處理管理類的應(yīng)用系統(tǒng)，最重要的是數(shù)據(jù)。數(shù)據(jù)類型多種多樣，對于不同分類的數(shù)據(jù)，需要利用不同的展示方式。隨著可視化技術(shù)的發(fā)展，可視化工具越來越多。然而如Java Jung、Social Action 等著名的可視化工具不支持 Web 開發(fā)[4]。目前在Web前端實現(xiàn)可視化的技術(shù)主要包括 JavaScript、Flash、Silverlight、Java Applet 等，其中JavaScript、Flash相對而言繪圖速度較快，是Web可視化的首選[5]。吳佳鑫[6]提出將信息可視化技術(shù)應(yīng)用于Web環(huán)境,則需要解決許多相關(guān)問題：該把信息可視化技術(shù)用在Web的哪些范圍；應(yīng)該采用何種實現(xiàn)方法具體實施；如何解決多用戶協(xié)作可視化問題。張建軍[10]提出運(yùn)用SSH與HighCharts技術(shù)整合架構(gòu)開發(fā)Web應(yīng)用系統(tǒng)，簡化系統(tǒng)的開發(fā)過程的同時，提高系統(tǒng)的可擴(kuò)展性和可維護(hù)性。

傳統(tǒng)的Web開發(fā)是在客戶端通過表單提交數(shù)據(jù)，要求在服務(wù)器上同時處理業(yè)務(wù)數(shù)據(jù)和樣式，這種開發(fā)模式不僅降低界面的質(zhì)量，而且開發(fā)進(jìn)度慢，數(shù)據(jù)交互時會造成視覺上不連續(xù)性，不適合在一個界面完成一系列連續(xù)操作。而基于AJAX的開發(fā)分割頁面設(shè)計和業(yè)務(wù)數(shù)據(jù)，有效的提高軟件并行開發(fā)的效率。AJAX不僅能保證視覺上的連續(xù)性，而且還具備豐富的數(shù)據(jù)表現(xiàn)能力。傳統(tǒng)開發(fā)方式可以應(yīng)用在各種類型的應(yīng)用系統(tǒng)中，而AJAX開發(fā)方式適合數(shù)據(jù)處理，管理類的應(yīng)用系統(tǒng)，不適合以內(nèi)容發(fā)布為主的應(yīng)用系統(tǒng)[9]。

本文將詳細(xì)解剖幾種流行的可視化技術(shù)，采取最適用于水利領(lǐng)域的一種可視化技術(shù)，結(jié)合AJAX的開發(fā)方法，提出一種水利領(lǐng)域開發(fā)模型，實現(xiàn)智慧滁河系統(tǒng)中水雨情實時信息展示，為水利Web系統(tǒng)開發(fā)提供借鑒。

3 可視化技術(shù)

3.1 HighCharts

HighCharts[11]是功能強(qiáng)大、開源、美觀、圖表豐富、兼容絕大多數(shù)瀏覽器的純JavaScript編寫的一個圖表庫， 能夠很簡單便捷的在Web網(wǎng)站或是Web應(yīng)用程序添加有交互性的圖表，并且免費提供給個人學(xué)習(xí)、個人網(wǎng)站和非商業(yè)用途使用。HighCharts支持的圖表類型有曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表。HighCharts界面美觀，由于使用JavaScript編寫，所以不需要像Flash和Java那樣需要插件才可以運(yùn)行，而且運(yùn)行速度快。另外HighCharts還有很好的兼容性，能夠完美支持當(dāng)前大多數(shù)瀏覽器。

HighCharts技術(shù)相對于傳統(tǒng)的表單交互，不受語言約束，可以在大多數(shù)的WEB開發(fā)中使用；表格可導(dǎo)出為 PDF/ PNG/ JPG / SVG格式，也可在網(wǎng)頁輸出圖表；具有時間軸，提示功能，可以設(shè)置在數(shù)據(jù)點上顯示提示效果，可以對圖表擴(kuò)大操作。此外，HighCharts采用純JavaScript編寫，從服務(wù)器載入動態(tài)數(shù)據(jù)，可用多種語言實現(xiàn)，并兼容不同瀏覽器。

3.2 D3

D3[13]雖然發(fā)布的時間不長，但是影響比較大，它也被一些表格插件所使用。D3 利用的SVG 是基于可擴(kuò)展標(biāo)記語言，用于描述二維矢量圖形的一種圖形格式。SVG 是國際互聯(lián)網(wǎng)標(biāo)準(zhǔn)組織在2000年8月制定的規(guī)范的網(wǎng)絡(luò)矢量圖形標(biāo)準(zhǔn)。SVG嚴(yán)格遵從XML 語法，并用文本格式的描述性語言來描述圖像內(nèi)容，因此是一種和圖像分辨率無關(guān)的矢量圖形格式[14]。D3作為最流行的可視化庫之一，它被很多其他的表格插件所使用，可以通過數(shù)據(jù)來操作文檔。D3可以通過使用HTML、SVG和CSS把數(shù)據(jù)鮮活形象地展現(xiàn)出來。D3嚴(yán)格遵循Web標(biāo)準(zhǔn)，因而可以讓你的程序輕松兼容現(xiàn)代主流瀏覽器并避免對特定框架的依賴。同時，它提供了強(qiáng)大的可視化組件，可以讓使用者以數(shù)據(jù)驅(qū)動的方式去操作DOM[15]。允許綁定任意數(shù)據(jù)到DOM，然后將數(shù)據(jù)驅(qū)動轉(zhuǎn)換應(yīng)用到Document中?？梢允褂盟靡粋€數(shù)組創(chuàng)建基本的HTML表格，或是利用它的流體過度和交互，用相似的數(shù)據(jù)創(chuàng)建驚人的SVG條形圖。

3.3 ECharts

ECharts是百度前端數(shù)據(jù)可視化團(tuán)隊推出的開源項目，已經(jīng)得到商業(yè)應(yīng) 用。該組件基于html5 Canvas，是一個由Javascript 編寫的圖表庫，能夠提供高度可定制化的可視化圖表。它是一個純Javascript的圖表庫，可以流暢的運(yùn)行在PC和移動設(shè)備上，兼容當(dāng)前絕大部分瀏覽器，底層依賴輕量級的Canvas類庫ZRender，提供直觀，生動，可交互，可高度個性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶體驗，賦予了用戶對數(shù)據(jù)進(jìn)行挖掘、整合的能力。同時，它具有強(qiáng)大的表達(dá)能力，支持折線圖、柱狀圖、散點圖、K線圖、餅圖、雷達(dá)圖、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標(biāo)題，詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯(lián)動和混搭展現(xiàn)。

ECharts具有非常小的文件體積，滿足更輕便的使用需求更靈活的打包方式，可自由選擇用戶所需要的圖表和組件。具有良好的自適應(yīng)效果，并且適用于移動端交互體驗。與眾多可視化技術(shù)相比，新增更多圖表類型，更好的滿足不同數(shù)據(jù)的處理需求 更多的搭配方案讓數(shù)據(jù)呈現(xiàn)方式更個性和完美。

4 可視化效果評估

4.1 可視化評估準(zhǔn)則

MORSE等指出信息可視化評估方面的研究較少，當(dāng)前不存在直接和通用的可視化的評估方式[16]。MEYER在中也提到由于缺乏實證證據(jù)和可視化方法種類太多，沒有普遍接受的最優(yōu)數(shù)據(jù)展示的標(biāo)準(zhǔn)[17]。PURCHASE認(rèn)為評估應(yīng)該不僅考慮美學(xué)因素或計算效率，還應(yīng)該考慮可視化對用戶績效的提升能力。FREITAS主張使用表現(xiàn)力和有效性來評價信息可視化的效果，并提出的認(rèn)知復(fù)雜度和空間組織兩個標(biāo)準(zhǔn)[18]。DOWELL指出特定領(lǐng)域的可視化的評估推廣性較差。

根據(jù)信息可視化的十大原則[19]，可視化技術(shù)與應(yīng)用需向直觀化，關(guān)聯(lián)化，藝術(shù)化以及交互化這四方面努力。

4.2 性能對比

當(dāng)前，在瀏覽器中創(chuàng)建圖形有兩種技術(shù)：Canvas和 SVG。它們雖然功能相似，但是在根本上是不同的，如表1所示。

表1 Canvas與SVG的比較

上文闡述了可視化技術(shù)的評估標(biāo)準(zhǔn)，本節(jié)對D3、HighCharts、ECharts 3種可視化技術(shù)分析對比，對其性能進(jìn)行評估，如表2所示。

表2 D3、HighCharts以及ECharts性能對比

HighCharts和ECharts相似，與D3維度不同，基本作用是繪制圖表；D3相對更自由，使用范圍更廣，靈活度高，但是在美觀度和工作量方面不如前兩種技術(shù)。針對性能方面，簡單圖表的繪制都適用，因此需要考慮數(shù)據(jù)量大、復(fù)雜運(yùn)算、動畫效果復(fù)雜等情況下加載速度的快慢。由于水文數(shù)據(jù)水位、流量大小及其季節(jié)變化，不同位置汛期不同，并且具有周期性。傳感器獲取的實時水文數(shù)據(jù)則具有數(shù)據(jù)量大，增長速遞快，時間間隔不穩(wěn)定的特點，針對上述水利服務(wù)系統(tǒng)應(yīng)用領(lǐng)域數(shù)據(jù)特點，HighCharts和ECharts在美觀，交互性等方面都能很好的處理。而D3不適用于該類水文數(shù)據(jù)的展示。因此，下文將分析對比HighCharts和ECharts渲染性能。

5 實驗分析

本文在智慧滁河項目背景下，結(jié)合AJAX開發(fā)方式，實現(xiàn)ECharts和HighCharts兩種可視化技術(shù)繪圖，對比分析其時間和應(yīng)用效果。實驗硬件支撐環(huán)境，如表3所示。

表3 實驗硬件支撐環(huán)境

其中1和2是項目硬件支撐環(huán)境，本實驗基于智慧滁河水利項目。

本實驗通過求渲染時間的算術(shù)平均值來衡量渲染速度，具體如式(1)。

(1)

本實驗數(shù)據(jù)為南京市水利局小型水庫毛營2015年的水位數(shù)據(jù)和雨量數(shù)據(jù)，此傳感器采集數(shù)據(jù)為每5分鐘一條，因此展示一天內(nèi)有288條水位數(shù)據(jù)。對比ECharts和HighCharts渲染速度，得到結(jié)果，如下圖1所示。

表2定量的給出了ECharts和HighCharts對數(shù)據(jù)的渲染時間，可以看出ECharts比HighCharts耗時更短；從表1可以明顯的看出，ECharts技術(shù)的渲染時間在數(shù)據(jù)為2000條左右時出現(xiàn)比較大的波動，當(dāng)數(shù)據(jù)量在2000之后，渲染時間呈穩(wěn)定狀態(tài)，以微弱的幅度上升。HighCharts技術(shù)渲染速度比較明顯，整體處于直線上升趨勢。由此可看出，從效率上，ECharts明顯優(yōu)于HighCharts。

表4 ECharts和HighCharts渲染速度對比表

圖1 ECharts和HighCharts渲染速度對比

智慧滁河水利項目是基于傳感器對水文傳感器流數(shù)據(jù)獲取、處理、存儲、展現(xiàn)的軟件系統(tǒng)，實現(xiàn)“感知滁河、重現(xiàn)滁河、決策滁河、生態(tài)滁河”的目標(biāo)。由于傳感器數(shù)據(jù)處理和展示的高時效性，高性能要求，因此提出基于ECharts可視化技術(shù)水利領(lǐng)域項目開發(fā)模型，采用AJAX對數(shù)據(jù)處理， 采用ECharts展示數(shù)據(jù)。模型結(jié)構(gòu)，如圖2所示。

利用ECharts實現(xiàn)實時數(shù)據(jù)渲染效果，如圖3所示。圖3中X軸為時間值，精確到毫秒，Y軸分為兩部分，分別是實時水位和實時雨量，其中水位為折線圖，單位m。雨量為柱狀圖，單位為mm。實現(xiàn)效果，如圖3所示。其中圖右上角為用戶交互工具。

圖2 基于ECharts可視化技術(shù)水利領(lǐng)域項目開發(fā)模型

圖3 ECharts繪圖效果展示

綜上所述，水利領(lǐng)域系統(tǒng)應(yīng)用ECharts可視化技術(shù)做數(shù)據(jù)展示，不僅美觀大方，交互友好，在效率上較其他的技術(shù)有明顯的提高。效率上的提升使得該技術(shù)可以應(yīng)用于具有大量實時數(shù)據(jù)的水利系統(tǒng)中。

6 總結(jié)

ECharts可視化技術(shù)兼容當(dāng)前絕大部分瀏覽器，強(qiáng)大的表達(dá)能力，提供直觀，生動，可交互，可高度個性化定制的數(shù)據(jù)可視化圖表，在滿足水文數(shù)據(jù)多樣化的需求的同時方便用戶直觀了解數(shù)據(jù)，對數(shù)據(jù)情況一目了然，大大增強(qiáng)了用戶體驗，賦予了用戶對數(shù)據(jù)進(jìn)行挖掘、整合的能力。AJAX是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù),能實現(xiàn)異步更新。

本文主要分析當(dāng)前流行的可視化技術(shù)的功能和性能，著重探究了ECharts可視化技術(shù)的圖表渲染性能問題，實驗得出此技術(shù)和類似可視化技術(shù)相比，不僅在展示方面更美觀，包容性強(qiáng)，而且渲染速度更快，滿足水文數(shù)據(jù)量龐大，種類繁多，實時性高的特性。最后結(jié)合AJAX，提出基于ECharts技術(shù)的開發(fā)模型，展示ECharts繪圖效果。

[1] 蔡陽. 水利信息化 “十三五” 發(fā)展應(yīng)著力解決的幾個問題[J]. 水利信息化, 2016 (1): 1-5.

[2] 陳鵬, 司健, 于子桓, 等. 基于信息熵的網(wǎng)絡(luò)流異常監(jiān)測和三維可視方法[J]. 計算機(jī)工程與應(yīng)用, 2015 (12): 88-93.

[3] 趙捷, 譚國強(qiáng). 基于新浪微博的數(shù)據(jù)挖掘及可視化研究[J]. 電子技術(shù)與軟件工程, 2015 (18): 181-182.

[4] 梁健, 張兆鋒, 史新, 等. 漢語科技詞系統(tǒng)調(diào)研報告(4)—知識組織系統(tǒng)關(guān)鍵技術(shù)[R]. 北京: 中國科學(xué)技術(shù)信息研究所, 2009.

[5] 趙越, 陳志偉, 蔡淑惠, 等. 大數(shù)據(jù)量科學(xué)計算數(shù)據(jù)的動態(tài) Web 可視化[J]. 現(xiàn)代計算機(jī), 2012 ( 5 ):3-6.

[6] 吳佳鑫. Web 環(huán)境下信息可視化模型研究[D]. 武漢：武漢大學(xué), 2009.

[7] 劉勘, 周曉崢, 周洞汝. 數(shù)據(jù)可視化的研究與發(fā)展[J]. 計算機(jī)工程, 2002, 28(8): 1-2.

[8] 周寧, 陳勇躍, 金大衛(wèi), 等. 知識可視化與信息可視化比較研究[J]. 情報理論與實踐, 2007, 30(2): 178-181.

[9] 金瑩, 李超. 基于 AJAX 的 WEB 開發(fā)研究[J]. 電腦知識與技術(shù): 學(xué)術(shù)交流, 2009, 5(2): 839-840.

[10] 張建軍, 劉虎, 倪芳英. 基于 SSH 與 Highcharts 整合架構(gòu)的 Web 應(yīng)用研究[J]. 計算機(jī)技術(shù)與發(fā)展, 2013, 23(9): 245-247.

[11] 董耀華. 物聯(lián)網(wǎng)技術(shù)與應(yīng)用[M].上海:上?？茖W(xué)技術(shù)出版 社,2012.

[12] 張運(yùn)良, 張兆鋒, 張曉丹, 等. 使用 D3. js 的知識組織系統(tǒng) Web 動態(tài)交互可視化功能實現(xiàn)[J]. 現(xiàn)代圖書情報技術(shù), 2013, 29(7/8): 127-131.

[13] Amr T, Stamboliyska R. Getting Started with D3[M]//Practical D3. js. Apress, 2016: 75-90.

[14] Dailey D, Frost J, Strazzullo D. Building web applications with SVG[M]. Pearson Education, 2012.

[15] 劉芳. 信息可視化技術(shù)及應(yīng)用研究[D]. 杭州: 浙江大學(xué), 2013.

[16] Morse E, Lewis M, Olsen K A. Evaluating visualizations: using a taxonomic guide[J]. International Journal of Human-Computer Studies, 2000, 53(5): 637-662.

[17] Meyer J. Performance with tables and graphs: Effects of training and a visual search model[J]. Ergonomics, 2000, 43(11): 1840-1865.

[18] 楊峰, 李蔚. 評價信息可視化技術(shù)的指標(biāo)研究[J]. 圖書情報知識, 2007 (4): 80-84.

[19] Kelleher C, Wagener T. Ten guidelines for effective data visualization in scientific publications[J]. Environmental Modelling & Software, 2011, 26(6): 822-827.

[20] 楊彥波, 劉濱, 祁明月. 信息可視化研究綜述[J]. 河北科技大學(xué)學(xué)報, 2014, 35(1): 91-102.

[21] Ahn J, Brusilovsky P. Adaptive visualization for exploratory information retrieval[J]. Information Processing & Management, 2013, 49(5): 1139-1164.

Research and Application of Visualization Technology in Water Resources System Service

Liu Xifeng1,Wang Zhijian1,2,Ye Feng1,2

(1. College of Computer and Information, Hohai University, Nanjing 211100, China; 2. School of computer science and technology, Nanjing University of Aeronautics and Astronautics, Nanjing 210016, China)

Water resources information system is a data intensive system. In flood warning and other services, the real-time query of data requires high efficiency. At present, the graphics visualization technology of water conservancy system needs to overcome the problems such as complex operation, low complexity, low efficiency, lack of generality and operability. In this paper, we use the visual evaluation criteria to compare the current popular visualization technology and analyze its rendering function and performance. The experimental results show that ECharts not only meets the demand of water resources system to display the business data quickly and efficiently, but also is simple and convenient to operate. Finally, based on the Chuhe project, the paper proposes a water conservancy system development model based on the visual tool ECharts, to provide technical support and scientific basis for the visualization of water conservancy system.

Visualization technology; Visualization application; Data visualization; Water conservancy system

江蘇水利科技項目(2013025)；河海大學(xué)中央高?；究蒲袠I(yè)務(wù)費項目(2009B21614)。

劉喜鳳(1992-)，女，衡陽人，碩士，研究方向：數(shù)據(jù)血統(tǒng)，數(shù)據(jù)挖掘 王志堅(1958-)，男，北京人，教授，博士生導(dǎo)師，研究方向：軟件理論和水信息學(xué)研究 葉 楓(1980-)，男，濟(jì)南人，講師，研究方向：云計算、大數(shù)據(jù)研究

1007-757X(2017)03-0025-04

TP311

A

2016.05.26)