蔣璐，王曉宏，朱立谷，張迪

(中國(guó)傳媒大學(xué) 計(jì)算機(jī)學(xué)院，北京 100024)

多維數(shù)據(jù)可視分析方法研究

蔣璐，王曉宏，朱立谷，張迪

(中國(guó)傳媒大學(xué) 計(jì)算機(jī)學(xué)院，北京 100024)

隨著科學(xué)與技術(shù)的發(fā)展，產(chǎn)生了大量的數(shù)據(jù)，為了幫助人們更好地了解數(shù)據(jù)的變化趨勢(shì)，產(chǎn)生了一門(mén)重要的分支——數(shù)據(jù)可視化。數(shù)據(jù)可視化是大數(shù)據(jù)分析的一個(gè)重要手段，它是用視覺(jué)形式向人們展示數(shù)據(jù)重要性的一種方法，使生硬的數(shù)字通過(guò)數(shù)據(jù)可視化軟件就可以很容易發(fā)現(xiàn)其關(guān)聯(lián)變化。本文根據(jù)某公司報(bào)警運(yùn)營(yíng)服務(wù)需求，在報(bào)警服務(wù)平臺(tái)的框架下介紹報(bào)警平臺(tái)可視化的環(huán)境及工作流程，結(jié)合基于降維的數(shù)據(jù)分析技術(shù)，具體討論關(guān)于北京市ATM報(bào)警數(shù)據(jù)的信息可視化的設(shè)計(jì)、實(shí)現(xiàn)和步驟。

數(shù)據(jù)可視化；ATM報(bào)警數(shù)據(jù)；數(shù)據(jù)分析

1 引言

在當(dāng)今這個(gè)大數(shù)據(jù)時(shí)代的前夜，信息量飛速增長(zhǎng)，讓我們不得不面對(duì)“無(wú)關(guān)、錯(cuò)誤的信息也飛速增長(zhǎng)”這樣一個(gè)事實(shí)。將這些無(wú)關(guān)、錯(cuò)誤的信息甄別出來(lái)，并將數(shù)據(jù)組織地更為高效，從而方便后續(xù)的分析，便成為了數(shù)據(jù)科學(xué)中日益重要的環(huán)節(jié)。

ATM報(bào)警服務(wù)平臺(tái)匯聚和整合了各地報(bào)警運(yùn)營(yíng)中心系統(tǒng)的業(yè)務(wù)數(shù)據(jù)，然后利用數(shù)據(jù)分析手段，分析和挖掘這些數(shù)據(jù)，使得能夠全面了解系統(tǒng)的運(yùn)行情況，發(fā)現(xiàn)系統(tǒng)的運(yùn)行規(guī)律，洞察系統(tǒng)的運(yùn)行問(wèn)題[1]。

ATM報(bào)警服務(wù)平臺(tái)功能是報(bào)警中心的不同狀態(tài)(建點(diǎn)、變更、運(yùn)營(yíng)、撤點(diǎn))、網(wǎng)點(diǎn)數(shù)目、設(shè)備在線(xiàn)率、接警數(shù)、派單數(shù)、接聽(tīng)對(duì)講數(shù)、接警處置率、派單完成率、反復(fù)故障率、故障類(lèi)型分布情況、設(shè)備類(lèi)型分布情況、設(shè)備品牌分布情況等指標(biāo)實(shí)現(xiàn)可視化。作為一個(gè)有組織的科學(xué)分支，可視化起源于美國(guó)國(guó)家科學(xué)基金會(huì)(NFS)的報(bào)告《科學(xué)計(jì)算機(jī)中的可視化》[2]。在該篇報(bào)告的觀(guān)點(diǎn)中，我們可以將可視化當(dāng)成一種能處理大量信息數(shù)據(jù)，且能被直觀(guān)觀(guān)察現(xiàn)象的工具[3]。

2 系統(tǒng)體系架構(gòu)

2.1 技術(shù)介紹

安防報(bào)警平臺(tái)在使用B/S架構(gòu)的基礎(chǔ)上采用mean.js技術(shù)堆棧：MongoDB作為數(shù)據(jù)庫(kù)、Express作為服務(wù)器框架、AngularJS作為前端框架和Node.js作為web服務(wù)器。在具體流程上，同時(shí)實(shí)現(xiàn)新的mean.js技術(shù)架構(gòu)與舊技術(shù)的整合：

將現(xiàn)有數(shù)據(jù)導(dǎo)入新建的mongodb數(shù)據(jù)庫(kù)，開(kāi)發(fā)基于mongodb的數(shù)據(jù)查詢(xún)API接口，逐步替代原有的sql接口。

使用新的可視化開(kāi)發(fā)套件，重構(gòu)報(bào)警服務(wù)平臺(tái)web前端的報(bào)表展示層。百度ExcellentFrontEnd技術(shù)體系下的開(kāi)發(fā)套件。這些項(xiàng)目包含數(shù)據(jù)可視化圖表庫(kù)Echarts，高性能的JavaScript模板引擎Etpl，前端開(kāi)發(fā)套件EDP等等。對(duì)于一些純粹是自定義的可視化案例開(kāi)發(fā)，則使用d3.js類(lèi)庫(kù)進(jìn)行開(kāi)發(fā)，d3.js是數(shù)據(jù)驅(qū)動(dòng)的SVG圖形編輯與交互制作的基礎(chǔ)類(lèi)庫(kù)。另外，使用百度API第三方庫(kù)提供的免費(fèi)地理信息服務(wù)接口，來(lái)輔助我們進(jìn)行關(guān)于地理信息系統(tǒng)的開(kāi)發(fā)。

使用HTML5技術(shù)重構(gòu)web前端整體架構(gòu)，實(shí)現(xiàn)瀏覽器端對(duì)大屏幕、桌面、移動(dòng)端的響應(yīng)式兼容。

2.2 邏輯架構(gòu)設(shè)計(jì)

我們提出了報(bào)警云平臺(tái)全新的處理架構(gòu)，用以支持?jǐn)?shù)據(jù)分析、數(shù)據(jù)可視化呈現(xiàn)和適應(yīng)各種大小屏幕設(shè)備的要求。

如圖1所示，ATM 報(bào)警平臺(tái)的處理框架主要分為兩個(gè)部分：預(yù)測(cè)分析和可視化平臺(tái)。預(yù)測(cè)分析覆蓋需求中的“虛假報(bào)警過(guò)濾”、“故障類(lèi)型預(yù)測(cè)”等預(yù)測(cè)性?xún)?nèi)容，需要采用典型的數(shù)據(jù)分析和數(shù)據(jù)挖掘方法來(lái)解決?？梢暬脚_(tái)工作主要覆蓋需求中的“全面了解業(yè)務(wù)情況”、“發(fā)現(xiàn)業(yè)務(wù)發(fā)展趨勢(shì)和背后原因”、“KPI考核”等描述性?xún)?nèi)容。需要通過(guò)建立web端平臺(tái)，設(shè)計(jì)具體案例來(lái)解決；可視化平臺(tái)工作：無(wú)論是哪類(lèi)工作，都必須建立在“了解數(shù)據(jù)，熟悉工具”的基礎(chǔ)上。通過(guò)重新分類(lèi)和加標(biāo)簽的方式做數(shù)據(jù)預(yù)處理的工作，選用tableau作為數(shù)據(jù)探索工具，processon作為知識(shí)記錄工具。以地理信息為切入點(diǎn)，以北京市為主要地理范圍，展示各類(lèi)指標(biāo)數(shù)據(jù)的應(yīng)用。

2.3 可視化實(shí)現(xiàn)設(shè)計(jì)

2.3.1 KPI數(shù)據(jù)可視化

根據(jù)當(dāng)前數(shù)據(jù)分析的結(jié)果和需求，計(jì)劃將KPI數(shù)據(jù)從員工、客戶(hù)、設(shè)備三方面做成案例來(lái)展示。

圖2 KPI數(shù)據(jù)可視化界面設(shè)計(jì)

我們以員工業(yè)績(jī)考核作為案例詳細(xì)介紹KPI數(shù)據(jù)展示主界面，詳見(jiàn)圖2。

我們的設(shè)計(jì)方案總體由五部分組成：

?第一部分：模板欄。該部分從員工業(yè)績(jī)、客戶(hù)信息、設(shè)備狀態(tài)三個(gè)角度進(jìn)行可視化案例展示，以滿(mǎn)足客戶(hù)不同類(lèi)型的需求。

?第二部分：總體數(shù)據(jù)展示區(qū)域。該區(qū)域展示的是數(shù)據(jù)的整體特征。通常情況下，以折線(xiàn)圖形式的線(xiàn)性布局呈現(xiàn)數(shù)據(jù)隨時(shí)間而變化的整體趨勢(shì)。概覽圖底部是條長(zhǎng)時(shí)間軸，由于我們的KPI數(shù)據(jù)是連續(xù)變化的，我們利用時(shí)間軸將每個(gè)節(jié)點(diǎn)的數(shù)據(jù)按時(shí)間順序連接起來(lái)，便于對(duì)用戶(hù)感興趣的數(shù)據(jù)進(jìn)行選定，然后橫向拖動(dòng)數(shù)據(jù)軸。

?第三部分：細(xì)節(jié)特征展示區(qū)域。采用柱狀圖進(jìn)行視覺(jué)編碼呈現(xiàn)KPI數(shù)據(jù)的細(xì)節(jié)特征，描述各項(xiàng)之間的差別情況，突出數(shù)據(jù)的比較，弱化時(shí)間的變化。

?第四部分：細(xì)節(jié)特征展示區(qū)域。要呈現(xiàn)KPI數(shù)據(jù)的細(xì)節(jié)特征，可以采用矩形樹(shù)圖進(jìn)行視覺(jué)編碼。若是要快速評(píng)估用戶(hù)得到的數(shù)據(jù)，可以采用層次數(shù)據(jù)的可視化方法，如樹(shù)圖。

?第五部分：篩選區(qū)域。該區(qū)域與二、三、四區(qū)域的數(shù)據(jù)都是相互關(guān)聯(lián)的，在刪選區(qū)域刪選出感興趣的數(shù)據(jù)，總體數(shù)據(jù)展示區(qū)域與細(xì)節(jié)特征展示區(qū)域根據(jù)選定數(shù)據(jù)發(fā)生相應(yīng)變化。

2.3.2 地理數(shù)據(jù)可視化

多維多元數(shù)據(jù)中的一個(gè)極為重要數(shù)據(jù)類(lèi)型是地理空間數(shù)據(jù)。在地理信息即服務(wù)(GaaS)日益普及的今天，地理空間數(shù)據(jù)的研究與應(yīng)用已經(jīng)滲入現(xiàn)代社會(huì)生活的方方面面。地理空間數(shù)據(jù)歷來(lái)都是重要的可視化研究對(duì)象，而地理空間數(shù)據(jù)特殊性，決定其需要特定的技術(shù)和方法。故而在本方案中，地理信息相關(guān)服務(wù)被作為一個(gè)單獨(dú)的類(lèi)型設(shè)計(jì)。基于全國(guó)電子地圖，設(shè)計(jì)可以自由縮放的“一張圖”，展示全國(guó)或具體省市的報(bào)警中心的實(shí)時(shí)數(shù)據(jù)，使得公司管理人員和工作人員可以直觀(guān)明了地了解各接警中心的業(yè)務(wù)當(dāng)前動(dòng)態(tài)。案例圖示如下：

圖3 地理數(shù)據(jù)可視化界面設(shè)計(jì)

整體界面遵循多視圖協(xié)調(diào)關(guān)聯(lián)(multiple coordinated views)的交互范式進(jìn)行設(shè)計(jì)。分為6個(gè)部分，1標(biāo)題欄、2地圖顯示欄、3數(shù)據(jù)選擇欄，4展示方式欄和5數(shù)據(jù)對(duì)比圖，6時(shí)間軸。以下一個(gè)例子說(shuō)明該界面的使用方式：

假設(shè)用戶(hù)要查詢(xún)本月設(shè)備各種故障對(duì)比情況。

◆則用戶(hù)需要點(diǎn)擊區(qū)域3中的故障情況列表，選擇要顯示的數(shù)據(jù)類(lèi)型。

◆然后在區(qū)域4中選擇顯示方式，這一步可選可不選，默認(rèn)散點(diǎn)圖顯示。

操作完畢后，其他區(qū)域分別顯示對(duì)應(yīng)的內(nèi)容：

?區(qū)域1顯示當(dāng)前對(duì)比的數(shù)據(jù)名稱(chēng)。

?區(qū)域2在地圖上顯示本月故障類(lèi)型。

?區(qū)域5顯示本月故障類(lèi)型總數(shù)，用柱狀圖、餅圖之類(lèi)的統(tǒng)計(jì)圖形表示。

?區(qū)域6顯示本月故障類(lèi)型時(shí)序變化關(guān)系，用主題流圖或折線(xiàn)圖表示。

區(qū)域2，5，6是可以交互的。例如當(dāng)用戶(hù)在2中選擇一部分點(diǎn)，則5，6只顯示這些點(diǎn)的對(duì)比關(guān)系。

3 核心技術(shù)

3.1 數(shù)據(jù)處理技術(shù)

3.1.1 了解數(shù)據(jù)

根據(jù)整理的數(shù)據(jù)庫(kù)的數(shù)據(jù)字典，查看數(shù)據(jù)類(lèi)型，對(duì)每個(gè)數(shù)據(jù)表進(jìn)行分類(lèi)處理，將數(shù)據(jù)表中的數(shù)據(jù)項(xiàng)分為標(biāo)識(shí)信息數(shù)據(jù)、類(lèi)型信息數(shù)據(jù)、時(shí)間信息數(shù)據(jù)、地理信息數(shù)據(jù)、指標(biāo)信息數(shù)據(jù)。使用此方式初步了解數(shù)據(jù)庫(kù)中的數(shù)據(jù)，進(jìn)行報(bào)警平臺(tái)數(shù)據(jù)的分析任務(wù)，并且進(jìn)行歸納總結(jié)，根據(jù)分好類(lèi)的數(shù)據(jù)整理畫(huà)圖，即對(duì)不同數(shù)據(jù)庫(kù)數(shù)據(jù)畫(huà)出相應(yīng)思維導(dǎo)圖。利用的工具為processon，processon是一種在線(xiàn)畫(huà)圖工具，具有專(zhuān)業(yè)的流程模板和海量共享的流程圖，具有在線(xiàn)自動(dòng)保存，快速創(chuàng)建主題等優(yōu)點(diǎn)，使用方便。但是當(dāng)圖中節(jié)點(diǎn)增多時(shí)，會(huì)影響響應(yīng)速度，出現(xiàn)響應(yīng)變慢的情況[4]。

我們將報(bào)警信息平臺(tái)的數(shù)據(jù)主要分為類(lèi)型信息數(shù)據(jù)、地理信息數(shù)據(jù)、指標(biāo)信息數(shù)據(jù)、標(biāo)識(shí)信息數(shù)據(jù)。其下更加詳細(xì)的分類(lèi)，則為編碼、名字、狀態(tài)、電話(huà)等類(lèi)別。

3.1.2 數(shù)據(jù)調(diào)研

借助思維導(dǎo)圖對(duì)數(shù)據(jù)有了初步了解后，下一步就是考慮如何將數(shù)據(jù)展示出來(lái)，進(jìn)行數(shù)據(jù)可視化。深入了解數(shù)據(jù)，根據(jù)用戶(hù)需求，整理可視化需要的數(shù)據(jù)，尋找展示如下指標(biāo)在時(shí)間維度和地理維度上的展示方法：派單完成數(shù)目、設(shè)備品牌、設(shè)備風(fēng)險(xiǎn)等級(jí)、設(shè)備報(bào)警數(shù)目、設(shè)備狀態(tài)(建點(diǎn)、變更、運(yùn)營(yíng)、撤點(diǎn))、接警數(shù)目、接警處置數(shù)目、反復(fù)故障率、接警處置率、派單完成率。將數(shù)據(jù)的各種信息轉(zhuǎn)化為圖形圖像的形式，從而更加有效的發(fā)揮我們的視覺(jué)效果[5]。

調(diào)研這些數(shù)據(jù)是否可以相互聯(lián)系展示，以及展示所需要的數(shù)據(jù)庫(kù)，數(shù)據(jù)庫(kù)表及表中字段。最終所有需要調(diào)研的數(shù)據(jù)研究發(fā)現(xiàn)均可以通過(guò)不同的方式實(shí)現(xiàn)可視化[6]。

整理結(jié)果(部分)如表1所示：

表1 數(shù)據(jù)整理

3.1.3 基于降維的數(shù)據(jù)分析

由于我們認(rèn)知海量的多維數(shù)據(jù)存在一定的局限性，且大量的多維數(shù)據(jù)也會(huì)帶來(lái)一定的復(fù)雜性[7]。所以分析和挖掘數(shù)據(jù)中的一些特征，在數(shù)據(jù)之間發(fā)現(xiàn)其規(guī)律特征就顯得尤為重要，也就是數(shù)據(jù)分析。數(shù)據(jù)分析方法有兩種，基于降維的數(shù)據(jù)分析和基于非降維的數(shù)據(jù)分析。其中，通過(guò)分析數(shù)據(jù)之間的特征，將數(shù)據(jù)從多維降低到低維的方法為基于降維的數(shù)據(jù)分析，該方法不僅保留了數(shù)據(jù)之間的主要特征，又方便了分析數(shù)據(jù)和顯示數(shù)據(jù)，但是可能會(huì)帶來(lái)一些影響，如原有數(shù)據(jù)攜帶的信息被損失。而通過(guò)分析多維數(shù)據(jù)之間的距離和相關(guān)性等指導(dǎo)數(shù)據(jù)的重新組織排列的方法是基于非降維的數(shù)據(jù)分析[8]。

本文從非降維的圖表中獲取數(shù)據(jù)之間的特征，采用基于降維的數(shù)據(jù)分析方法來(lái)引導(dǎo)數(shù)據(jù)的重新排列和組織，減少數(shù)據(jù)的維度，而不損失信息。

圖4 各故障報(bào)警時(shí)序圖

由故障報(bào)警時(shí)序圖可知，X軸為報(bào)警時(shí)間，Y軸為報(bào)警數(shù)目，不同顏色代表不同報(bào)警事件類(lèi)型，我們可以知道灰色代表的報(bào)警事件每次發(fā)生數(shù)量都比較多，但不具有連續(xù)性，而藍(lán)色、紫色、綠色代表的報(bào)警事件很連貫，幾乎每天都有，但每次數(shù)量不大。在原始數(shù)據(jù)未處理時(shí)，顯示效果不理想，不能準(zhǔn)確的判斷數(shù)值的大小，也不能有效獲知數(shù)據(jù)之間的關(guān)系。經(jīng)降維處理后，能得到轉(zhuǎn)換后的數(shù)據(jù)和每個(gè)故障對(duì)應(yīng)的時(shí)序故障數(shù)及相互之間緊密度。如圖5所示，數(shù)據(jù)在經(jīng)過(guò)改進(jìn)的分級(jí)聚類(lèi)處理后，其顯示效果得到極大的提高，我們可以看出掉電恢復(fù)和交流掉電的頻率最接近，周邊防區(qū)報(bào)警和接近報(bào)警的頻率也接近，可以猜測(cè)它們之間存在必然的聯(lián)系。研究者就可以根據(jù)圖表所展示出來(lái)的信息提供對(duì)應(yīng)的解決方案。

圖5 降維處理結(jié)果圖

3.2 可視化建模

由于在實(shí)際的可視化應(yīng)用系統(tǒng)中，部分?jǐn)?shù)據(jù)需要經(jīng)過(guò)統(tǒng)計(jì)分析等數(shù)據(jù)變換才能應(yīng)用于數(shù)據(jù)可視化，因此，應(yīng)用數(shù)據(jù)庫(kù)中的哪些數(shù)據(jù)能夠應(yīng)用于可視化，哪些數(shù)據(jù)在經(jīng)過(guò)一定的統(tǒng)計(jì)分析，數(shù)據(jù)變換之后能夠應(yīng)用于可視化技術(shù)是可視化建模主要解決的問(wèn)題。

本系統(tǒng)使用的可視化建模工具是Tableau，Tableau 是桌面系統(tǒng)中最簡(jiǎn)單的商業(yè)智能工具軟件。Tableau 是簡(jiǎn)單的商業(yè)智能工具軟件，具有活躍的儀表盤(pán)，可視數(shù)據(jù)瀏覽，對(duì)于數(shù)據(jù)分析十分方便快捷。輕松的拖放式界面，適用于多種數(shù)據(jù)文件與數(shù)據(jù)庫(kù)，具有數(shù)據(jù)可擴(kuò)展性，不限所處理的數(shù)據(jù)大小[9]。

圖6 Tableau地理數(shù)據(jù)建模

如圖6所示，就是根據(jù)processon整理的數(shù)據(jù)，對(duì)北京市各個(gè)城區(qū)ATM機(jī)的設(shè)備狀態(tài)情況的統(tǒng)計(jì)。

設(shè)計(jì)目標(biāo)：基于了解各客戶(hù)所屬設(shè)備目前的運(yùn)營(yíng)狀態(tài)，使得公司管理人員和工作人員可以直觀(guān)明了地了解各個(gè)城區(qū)設(shè)備狀態(tài)的情況，方便用戶(hù)清楚各客戶(hù)哪些設(shè)備處于運(yùn)營(yíng)、停運(yùn)或更新的情況，提出對(duì)應(yīng)的解決方案提高運(yùn)營(yíng)效率。結(jié)合地圖顯示狀態(tài)分布情況地區(qū)，讓人清楚各地區(qū)主要的狀態(tài)情況，數(shù)目及時(shí)序分布。

元素說(shuō)明：下圖為各客戶(hù)所屬設(shè)備的狀態(tài)圖。其中，網(wǎng)點(diǎn)圖是根據(jù)各銀行客戶(hù)所有區(qū)域分塊展示，不同顏色代表不同設(shè)備狀態(tài)，如綠色-運(yùn)營(yíng)，紅色-停運(yùn)，紫色-更新，黃色-恢復(fù)。條形疊狀圖是各銀行客戶(hù)相應(yīng)狀態(tài)的設(shè)備數(shù)量總計(jì)，橫軸代表設(shè)備數(shù)目，縱軸代表客戶(hù)名稱(chēng)，我們可以看出綠色面積最大，代表大部分設(shè)備都處于運(yùn)營(yíng)狀態(tài)。面積圖是不同時(shí)間點(diǎn)的狀態(tài)數(shù)目的統(tǒng)計(jì)，不同顏色代表不同的狀態(tài)，按升序排序，可以看出6、7、8月運(yùn)營(yíng)設(shè)備數(shù)目比較多。

圖7 Tableau時(shí)序數(shù)據(jù)建模

如圖7所示，根據(jù)整理的數(shù)據(jù)，對(duì)北京市各個(gè)城區(qū)ATM機(jī)的維護(hù)數(shù)目及情況的展示。

設(shè)計(jì)目標(biāo)：基于了解各設(shè)備目前的維護(hù)過(guò)程及情況，方便用戶(hù)掌握各設(shè)備目前的狀況及維護(hù)的處理過(guò)程。通過(guò)這種建模從而按時(shí)序展示各設(shè)備的維護(hù)數(shù)目，以發(fā)現(xiàn)什么時(shí)間段維護(hù)效率最好，數(shù)目最多，根據(jù)此記錄分析不同銀行客戶(hù)所屬設(shè)備對(duì)應(yīng)狀態(tài)的數(shù)量及占比分布。

元素說(shuō)明：條形圖中不同顏色代表不同的調(diào)試狀態(tài)，我們可以看出極少數(shù)設(shè)備是調(diào)試不通過(guò)，大部分是調(diào)試通過(guò)，橫軸代表設(shè)備數(shù)目，縱軸代表客戶(hù)名稱(chēng)，顏色代表調(diào)試狀態(tài)。折線(xiàn)圖橫軸代表時(shí)間，縱軸代表設(shè)備數(shù)目，顏色代表調(diào)試狀態(tài)。我們可以看出大部分設(shè)備的調(diào)試都是通過(guò)的。

3.3 可視化具體開(kāi)發(fā)

系統(tǒng)主要使用百度API進(jìn)行展示ATM各指標(biāo)信息，百度地圖API中包括JavaScript API、Web服務(wù)API、Android SDK、iOS SDK、定位SDK、車(chē)聯(lián)網(wǎng)API、LBS云等多種開(kāi)發(fā)工具與服務(wù)。本系統(tǒng)插入了SVG，并且實(shí)現(xiàn)了SVG根據(jù)鼠標(biāo)滾輪放大縮小。在SVG文件中嵌入動(dòng)畫(huà)元素，或通過(guò)腳本定義來(lái)達(dá)到高亮顯示、聲音、動(dòng)畫(huà)等效果。為了更好地展示數(shù)據(jù)，并使得數(shù)據(jù)展示的豐富性，我們還使用Echart來(lái)輔助我們開(kāi)發(fā)。ECharts是一個(gè)商業(yè)級(jí)數(shù)據(jù)圖表，一個(gè)純Javascript的圖表庫(kù)，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器。

3.3.1 百度echarts與真實(shí)數(shù)據(jù)的結(jié)合

要針對(duì)報(bào)警數(shù)據(jù)找出對(duì)應(yīng)的解決方案及做出事先預(yù)測(cè)，那么時(shí)序數(shù)據(jù)與報(bào)警數(shù)據(jù)的結(jié)合就至關(guān)重要，通過(guò)時(shí)序數(shù)據(jù)可視化結(jié)果發(fā)現(xiàn)報(bào)警規(guī)律，查找更多的分析信息。就具體的技術(shù)而言，我們采用Echarts作為主要的時(shí)序接口。Echarts的引入主要有三種：模塊化包引入，模塊化單文件引入和標(biāo)簽式單文件引入，我們采用的是模塊化單文件引入。

Echarts的引入具體步驟為：首先寫(xiě)好項(xiàng)目接口：控制臺(tái)和路由，在后臺(tái)組裝相應(yīng)的數(shù)據(jù)。然后配置路徑，引入echarts模塊，按需加載。引入echarts的js庫(kù)，加載相關(guān)依賴(lài)。在實(shí)際項(xiàng)目中將我們需要的數(shù)據(jù)從后端數(shù)據(jù)庫(kù)獲取后在前端頁(yè)面顯示。主要定義數(shù)組來(lái)儲(chǔ)存從中解析的數(shù)據(jù)。最后為加載一個(gè)顯示圖表的容器，引入到頁(yè)面顯示html文件中即可顯示圖表。如下圖所示：

圖8 員工接警處置數(shù)目圖

元素說(shuō)明：該圖顯示的是員工接警處置的報(bào)警數(shù)目，橫軸代表員工名，縱軸代表接警數(shù)，柱子越高代表該員工接警處置的數(shù)目越多。通過(guò)連接a表的TBL_SERVICE_CENTER_INDEX_INFO，取員工字段EMPLOYEE_NAME，通過(guò)累加函數(shù)在接口處對(duì)每個(gè)員工所有接警數(shù)進(jìn)行統(tǒng)計(jì)，再加載在取值函數(shù)中。上圖標(biāo)示了員工接警的最大數(shù)目、最小數(shù)目以及平均值，按降序排序，我們可以很清楚的看出每個(gè)員工的接警情況。

圖9 故障統(tǒng)計(jì)圖

元素說(shuō)明：上圖是一個(gè)簡(jiǎn)單的折線(xiàn)圖示例，折線(xiàn)圖用來(lái)描繪信息數(shù)據(jù)在時(shí)間序列上的變化趨勢(shì)[10]。該圖顯示的是從2015年8月1日到2015年9月12日各時(shí)間出現(xiàn)故障的報(bào)警數(shù)目，橫軸代表時(shí)間，縱軸代表報(bào)警數(shù)。從上圖折線(xiàn)的波峰波谷我們可以知道報(bào)警數(shù)目的峰值，報(bào)警時(shí)序數(shù)在8月1日達(dá)到頂峰，之后總體比較平緩。

3.3.2 百度地圖API與真實(shí)數(shù)據(jù)的結(jié)合

報(bào)警數(shù)據(jù)與地理信息數(shù)據(jù)息息相關(guān)，通過(guò)地理位置顯示報(bào)警位置等信息使得可視化效果清晰明了，可以對(duì)數(shù)據(jù)提供很多的分析信息。因此地理信息服務(wù)與報(bào)警數(shù)據(jù)的結(jié)合是非常重要的一環(huán)。

就具體的技術(shù)方面，我們采用百度地圖API作為主要地理信息接口，然后使用SQL語(yǔ)句作為編程語(yǔ)句[11]，將帶有經(jīng)緯度標(biāo)識(shí)的數(shù)據(jù)與之結(jié)合，在百度地圖上繪數(shù)據(jù)圖。例如根據(jù)故障緊急程度的數(shù)據(jù)大小在區(qū)域地圖上繪制熱力圖。為了更好的觀(guān)察故障緊急程度隨時(shí)間的變化，需要時(shí)序與地理相結(jié)合的模塊，如圖10所示。

圖10 ATM故障緊急程度交互圖

元素說(shuō)明：通過(guò)添加ATM故障數(shù)量時(shí)間軸，我們可以方便的觀(guān)察各網(wǎng)點(diǎn)在不同時(shí)間段發(fā)生故障的數(shù)量，地圖上各紫色區(qū)域代表網(wǎng)點(diǎn)發(fā)生的故障數(shù)量，時(shí)間軸可拖動(dòng)，時(shí)間軸上的藍(lán)色區(qū)域表示故障總數(shù)，我們也可以通過(guò)觀(guān)察區(qū)域波動(dòng)的范圍了解哪些時(shí)間段故障比較頻繁，方便做好接警處置工作。

3.3.3 地理數(shù)據(jù)SVG展示

報(bào)警網(wǎng)點(diǎn)數(shù)據(jù)中包含很多與時(shí)間相關(guān)的數(shù)據(jù)，例如設(shè)備在線(xiàn)率，派單完成率，設(shè)備故障分布情況，尤其特征明顯的設(shè)備報(bào)警分布情況等將它們與地理信息整合，可以更好地了解報(bào)警相關(guān)信息隨時(shí)間的實(shí)時(shí)變換，數(shù)據(jù)變換的分布情況和發(fā)展趨勢(shì)，便于及時(shí)掌握數(shù)據(jù)信息，對(duì)于報(bào)警網(wǎng)點(diǎn)管理與服務(wù)水平有很大的提升，所以需要時(shí)序與地理相結(jié)合的模塊。而百度API所提供的地點(diǎn)圖標(biāo)是有限的，對(duì)于一些特殊的信息我們通過(guò)SVG(可縮放矢量圖形)重繪數(shù)據(jù)圖標(biāo)凸顯其特殊性，SVG是一種基于可擴(kuò)展標(biāo)記語(yǔ)言的圖形格式[12]。

如圖11所示：

圖11 報(bào)警網(wǎng)點(diǎn)SVG圖

4 結(jié)論

本系統(tǒng)完成了報(bào)警中心的不同狀態(tài)(建點(diǎn)、變更、運(yùn)營(yíng)、撤點(diǎn))、網(wǎng)點(diǎn)數(shù)目、設(shè)備在線(xiàn)率、接警數(shù)、派單數(shù)、接聽(tīng)對(duì)講數(shù)、接警處置率、派單完成率、反復(fù)故障率、故障類(lèi)型分布情況、設(shè)備類(lèi)型分布情況、設(shè)備品牌分布情況等指標(biāo)的單獨(dú)界面展示，并且實(shí)現(xiàn)了一部分時(shí)間與地理數(shù)據(jù)間的互動(dòng)，后臺(tái)使用JS語(yǔ)言編寫(xiě)后臺(tái)接口，并且使用MongoDB進(jìn)行數(shù)據(jù)存儲(chǔ)[13]。

系統(tǒng)性能仍然需要提升，當(dāng)前端要求展示更多的數(shù)據(jù)時(shí)，系統(tǒng)的響應(yīng)時(shí)間明顯增加。可視化上，由于地圖中的點(diǎn)密度大，容易出現(xiàn)重合的情況，以至于用戶(hù)觀(guān)看效果不佳，因此，可以采用藍(lán)噪聲采樣算法[14]，來(lái)生成隨機(jī)且均勻分布的采樣點(diǎn)集合，減少地圖上顯示的點(diǎn)密度，提高視覺(jué)效果。接下來(lái)，工作重點(diǎn)是，根據(jù)用戶(hù)的需求，進(jìn)行功能完善，根據(jù)顯示結(jié)果，進(jìn)行數(shù)據(jù)分析[15]，比如，分析哪些地方更易發(fā)生哪類(lèi)報(bào)警故障，對(duì)報(bào)警的處理不及時(shí)的情況等，客戶(hù)可以及時(shí)發(fā)現(xiàn)異常情況，并進(jìn)行處理。

[1]韓歡. 基于大數(shù)據(jù)的智能交通運(yùn)輸平臺(tái)的研究[D]. 成都理工大學(xué)，2014.

[2]B H McCormic，T A DeFanti，and M D Brown，eds. Visualization in Scientific Computing[J]. Computer Graphics，1987，21(6)：45～50.

[3]于世東. 多維數(shù)據(jù)可視化技術(shù)的研究及應(yīng)用[D]. 沈陽(yáng)工業(yè)大學(xué)，2006.

[4]Tony. 網(wǎng)頁(yè)版Visio的替代品高大上的 ProcessOn[J]. 電腦迷，2013(22)：74-74.

[5]Nahum D Gershon，Stephen G Eick. Information Visualization[J]. IEEE Computer Graphics and Applications，1997(7/8)：29～31.

[6]李國(guó)杰，程學(xué)旗. 大數(shù)據(jù)研究：未來(lái)科技及經(jīng)濟(jì)社會(huì)發(fā)展的重大戰(zhàn)略領(lǐng)域——大數(shù)據(jù)的研究現(xiàn)狀與科學(xué)思考[J]. 中國(guó)科學(xué)院院刊，2012，27(6).

[7]Chen Chaomei. Top 10 unsolved information visualization problems [J]. IEEE Computer Graphics and Applications，July 2005：12-16.

[8](美)蘇克，戴維森著. 可視化數(shù)據(jù)挖掘：數(shù)據(jù)挖掘可視化和數(shù)據(jù)挖掘的技術(shù)與工具[M]. 北京：電子工業(yè)出版社，2004.

[9]雷君虎，楊家紅，鐘堅(jiān)成，等. 基于PCA和平行坐標(biāo)的高維數(shù)據(jù)可視化[J]. 計(jì)算機(jī)工程，2011，37(1)：48-50.

[10]沈浩.Tableau案例集[M]. 電子工業(yè)出版社，2015.

[11]貝里. 深入淺出SQL[M]. 東南大學(xué)出版社，2009

[12]馮文熠，朱昌盛.Ajax在實(shí)時(shí)繪制SVG圖表中的應(yīng)用研究[J]. 科協(xié)論壇，2012(1)：59-60.

[13](美)霍多羅夫，(美)迪洛爾夫(等.MongoDB權(quán)威指南[M]. 人民郵電出版社，2011.

[14]田玉敏，柯麗芳，馬勇. 一種改進(jìn)的基于藍(lán)噪聲的誤差分散算法[J]. 計(jì)算機(jī)工程與應(yīng)用，2006，42(26)：60-62.

[15]顧濤. 基于大數(shù)據(jù)的競(jìng)爭(zhēng)情報(bào)協(xié)作分析研究[J]. 情報(bào)科學(xué)，2013(12)：114-118.

(責(zé)任編輯：馬玉鳳)

Research on Visualization of Multidimensional Data

JIANG Lu，WANG Xiao-hong，ZHU Li-gu，ZHANG Di

(Computer Science School，Communication University of China，Beijing 100024)

It produced a large amount of data with the development of science and technology. We create an important branch of data visualization in order to help people understand the trend of data. Data visualization is an important means to analysis of large data，which shows a method of the importance of data to people in a visual form. Then stiff figures can be easily found the correlation changes through data visualization software. According to the alarm service demand ，the company introduces the alarm system environment and system workflow in the framework of the service platform of alarm，Combined with drop and non-drop dimensional based data analysis techniques，We discuss specifically the design，the realization and the steps of information visualization about Beijing ATM alarm data.

data visualization；ATM alarm data；data analysis

2016-06-16

蔣璐(1993-)，女(漢族)，湖南岳陽(yáng)人，中國(guó)傳媒大學(xué)理工學(xué)部研究生. Email：1092107278@qq.com

TP302.1

A

1673-4793(2017)02-0053-08