王子毅，張春海
?。ㄖ袊Ｑ蟠髮W 信息科學與工程學院，山東 青島 266100）
摘要：在傳統(tǒng)可視化流程模型基礎上，提出了一個基于用戶交互需求來獲取數(shù)據的改進可視化模型，并以ECharts為主體實現(xiàn)一種針對基礎圖表類型的支持數(shù)據挖掘和類型轉換交互的數(shù)據可視化分析組件，通過引用該組件到信息系統(tǒng)中，直觀、高效、明了地提高用戶對于數(shù)據的視覺感知。
關鍵詞：可視化；數(shù)據挖掘；模型改進
0引言
隨著科學技術的不斷進步, 特別是計算機技術的迅猛發(fā)展, 人們對于數(shù)據獲取與處理能力的要求也日漸提高。在這個互聯(lián)網時代的大背景下，當人們面對海量數(shù)據的時候, 僅僅通過單純的文本數(shù)據表達方式和分析手段來快速高效地處理和使用數(shù)據已經是非常困難的事，因此需要新的技術來解決這一問題［1］。數(shù)據可視化技術的提出，將人們對于數(shù)據處理和交互的理解方式帶到了一個全新的領域。它通過計算機繪圖的方式，提供多種圖形方法來直觀地把晦澀難懂的傳統(tǒng)數(shù)據形象生動地表達出來，大大加強了人們對于數(shù)據的理解交互力度。在這樣的情況下，可視化技術得以快速發(fā)展并迅速獲得了人們的認可。如何將可視化技術更好地應用到各個不同領域里，在不同平臺不同系統(tǒng)中發(fā)揮更大作用，已成為社會關注的熱點所在。
為此本文在充分學習和研究經典的可視化模型的基礎上，提出了一個基于用戶交互需求來獲取數(shù)據的改進的可視化模型——Drilldown模型，并基于模型實現(xiàn)一種針對基礎圖表類型的支持多級鉆取和類型轉換交互的數(shù)據可視化分析組件，目的在于提高用戶對于數(shù)據的視覺感知，增加與數(shù)據的交互能力和控制能力，提高數(shù)據處理效率。
1傳統(tǒng)可視化流程模型與改進模型
可視化可以看成是一個針對流程的數(shù)據處理過程，而不是一種技術或者算法。它不僅要關注最前端數(shù)據的采集處理，也要設計實現(xiàn)用于完成用戶交互和數(shù)據視覺映射的功能。這些都是在處理現(xiàn)實問題時會碰到的而又亟需解決的步驟，如果不處理好可能會直接影響到可視化效果［2］。
整個流程概念就是從最初的數(shù)據采集到數(shù)據處理和變換，進而到可視化映射，最后到用戶感知的一系列過程。
1.1傳統(tǒng)可視化模型
流水線模型作為最早期的傳統(tǒng)數(shù)據可視化流程模型，在各個方面比較完善地揭示了整個可視化流程的進程，從最開始對于原始數(shù)據的數(shù)據分析到對于預處理數(shù)據的過濾處理，再到對于需求的關注數(shù)據映射為幾何數(shù)據，最后繪制成可視化表現(xiàn)圖形。這一套流水線實際上嵌套了對于處理數(shù)據和繪制圖形之間方式進程的組合。具體模型如圖1所示。
可視化的流水線模型是一個最早成型的對于整個可視化流程有清晰描述的模型，但是它的缺陷顯而易見，在越來越成熟的可視化體系要求下，流水線模型沒有與用戶的交互，不能幫助用戶更深入地感知數(shù)據中的規(guī)律，也不能進行數(shù)據挖掘，無法進行數(shù)據修正。在人們對數(shù)據可視化和數(shù)據挖掘理念的理解越來越深的時候，一個新的數(shù)據可視化流程模型被提了出來。
1.2回路模型
針對上一節(jié)中的數(shù)據可視化流水線模型缺少用戶交互功能這一缺陷，有人提出了一種基于流水線模型優(yōu)化的數(shù)據可視化回路模型［3］?？梢暬Ｐ蛯⒘魉€改進成回路后，用戶可以從容進行數(shù)據的交互，如圖2所示。
可視化的回路模型很好地解決了用戶交互的問題，使用戶對于數(shù)據的挖掘和了解有了更多的可能性，通過特定的接口實現(xiàn)數(shù)據獲取和挖掘的要求。然而在該模型下用戶對于數(shù)據的進一步探索需要通過前臺觸發(fā)事件觸發(fā)的后臺請求才能進行，這樣就影響了響應速度，也降低了數(shù)據獲取的準確性，不能快速滿足客戶需求，同時也加大了系統(tǒng)的開銷。
1.3改進模型
本文針對上述兩種傳統(tǒng)可視化流程模型的缺陷，同時吸取兩個經典模型的優(yōu)點，提出了一種基于上述兩種優(yōu)良的傳統(tǒng)可視化流程模型的改進模型——可視化的Drilldown模型。該模型主旨在于數(shù)據驅動圖形，實現(xiàn)對于可視化圖形多級數(shù)據鉆取和不同類基本圖表間轉換的功能，如圖3所示。
對于一些改進模型的概念詳細解釋如下：
?。?）需求指示：通過用戶對于圖表類型選擇表達的數(shù)據交互愿望，對于后面數(shù)據的關系處理格式化規(guī)則進行規(guī)范。
?。?）關系處理格式化：通過關系數(shù)據庫，對指定上層數(shù)據和其所有下層關系數(shù)據及各屬性值一并提取并進行可視化對應格式的格式化處理。
?。?）交互式格式化：交互式格式化是指將前端倉庫中的數(shù)據按照用戶交互驅使的多級鉆取或圖表轉換事件所需要的嵌套數(shù)據格式，格式化為支持用戶進行數(shù)據交互的分層的層次數(shù)據格式。
?。?）層次數(shù)據：將前端倉庫中的數(shù)據按照用戶指定的數(shù)據間的上下級或前后順序優(yōu)先級關聯(lián)關系進行加工處理形成的數(shù)據格式。
?。?）交互對應映射：根據不同交互對應的內部函數(shù)需求的層次數(shù)據進行的可視化映射。
?。?）交互接口：不同的交互接口由不同的可實現(xiàn)不同層次數(shù)據可視化的功能函數(shù)實現(xiàn)，根據用戶的交互需求響應來完成各自工作，不同的接口可接收的層次數(shù)據也不同。
（7）首次交互：根據用戶的數(shù)據獲取要求，可視化控件的交互接口一次性完整取得從數(shù)據倉庫處理好的所需的層次數(shù)據。
（8）內部交互：當取完所需層次數(shù)據后，用戶再次請求數(shù)據交互時，通過內部函數(shù)的功能實現(xiàn)對取得的完整層次數(shù)據的處理，以滿足用戶的后續(xù)可視化挖掘要求。
Drilldown模型的原理是基于用戶交互事件來影響交互接口對于數(shù)據的處理和獲取，當用戶想要進行多級數(shù)據鉆取的流程時，通過對交互事件的判斷，觸發(fā)不同參數(shù)的接口去接收已完成交互式格式化的對應的層次數(shù)據，進而通過可視化模型的流程來展現(xiàn)當前數(shù)據。
Drilldown模型可以讓用戶在進行數(shù)據交互時不需要再向后臺發(fā)送數(shù)據請求，僅需要對已提取的數(shù)據倉庫中的數(shù)據進行交互式格式化，映射現(xiàn)有數(shù)據，便可以得到可視化結果，這樣大大提升了響應速度，節(jié)省了系統(tǒng)資源。同時允許用戶自主地進行可視化交互和數(shù)據挖掘，使整個流程迭代地對初始結果進行改善和驗證，有助于及早發(fā)現(xiàn)任何中間步驟的錯誤結果或自相矛盾的結論，從而快速獲得高可信度的結果。
2基于ECharts的組件設計與實現(xiàn)
2.1基礎概念與實現(xiàn)
2.1.1ECharts的簡介
ECharts（Enterprise Charts），是國內的一款非常優(yōu)秀的可視化圖表控件，它底層依賴輕量級的Canvas類庫ZRender，提供直觀、生動、可交互、可高度個性化定制的數(shù)據可視化圖表。
ECharts的設計是面向數(shù)據的，基于數(shù)據來驅動圖形的生成，通過改變數(shù)據來改變圖表的表現(xiàn)形式。通過合理的數(shù)據組織后，通過一個參數(shù)的變化就可以改變圖表的表現(xiàn)形式。所謂的樣式只是定義圖形的點線面狀態(tài)，數(shù)據組織才是關鍵。比如折柱餅圖，甚至地圖在ECharts里完全都可以針對同一份數(shù)據通過改變一個參數(shù)切換為不同的圖表類型。圍繞著如何組織數(shù)據來描述整個option，就可以使圖表類型有無限的可能。
2.1.2引入與基本圖表實現(xiàn)
ECharts只需要像普通的 JavaScript 庫一樣用 script 標簽引入，在繪圖前需要為ECharts準備一個具備高寬的dom容器，然后就可以通過echarts.init方法初始化一個 echarts實例，并通過 setOption 方法生成一個簡單的柱狀圖，簡單代碼如下所示：
//引入ECharts
<script src="echarts.js"></script>
</head>
<body>
<div id="main" style="width:
600px;height:400px;"></div>
<script type="text/javascript">// 基于準備好的dom，初始化ECharts實例
var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數(shù)據
var option = {
title: {text: '入門示例'},
圖5函數(shù)結構流程示意
tooltip: {},
legend: {data:［'銷量（百萬元）'］},
xAxis: {data: ［"奔馳","寶馬","奧迪","豐田"］},
yAxis: {},
series: ［{name: '銷量（百萬元）',type: 'bar',data: ［5, 20, 36, 10］}］
};
// 使用剛指定的配置項和數(shù)據顯示圖表
myChart.setOption(option);
</script>
形成的圖表如圖4所示。
2.2設計實現(xiàn)結構
2.2.1數(shù)據獲取與格式
數(shù)據獲取是整套模型體系的重要出發(fā)點，支持著最重要的數(shù)據模型。在前后臺交互模式中，前端的數(shù)據往往是通過經典的ajax請求技術，按照一個規(guī)范流程，通過后臺對于數(shù)據的處理，得到相應的格式數(shù)據(JSON格式)。
2.2.2層次數(shù)據的生成規(guī)則及維度對應
層次數(shù)據是前端倉庫根據用戶需求和用戶對數(shù)據層級之間關聯(lián)的理解挑選出來并經過分層處理后的實用性數(shù)據。層次數(shù)據的生成是依據人們對于數(shù)據層次關系的理解而建立出的數(shù)據形式，且要求包含所有可能對圖表維度有對應關系的屬性。
例如在餅圖多級鉆取的情況下，層次數(shù)據的基層格式除了層次關系分明外，數(shù)據格式和維度對應都是一樣的，只需要處理好數(shù)據的層間關系就可以，不需要關注共通屬性外的其他屬性。而在餅圖轉化為柱狀圖的情況下，層次數(shù)據除了要保持相對應的層間關系，還要注意次層數(shù)據將要對應的轉換模型，要將首層后的數(shù)據屬性處理對應好柱狀圖所需的維度。這樣就可以按需劃分，形成良好的層次數(shù)據規(guī)則，本質就是用戶需求驅動的一種涉及數(shù)據關系劃分的數(shù)據處理方式。
2.2.3組件內部的函數(shù)結構
根據模型的基本情況，本文對于組件內部的響應觸發(fā)設計是通過響應鼠標事件的方式來處理用戶和數(shù)據間的交互，鼠標單擊的click事件觸發(fā)數(shù)據鉆取或圖表轉換事件，鼠標雙擊的dbclick事件觸發(fā)回滾事件，使圖表恢復到最初的狀態(tài)。
以餅圖的多級鉆取為例，整個函數(shù)結構流程如圖5所示。
當用戶點擊餅圖其中一塊時，對用戶鼠標點擊事件進行識別判斷。
若是單擊事件，則組件內部響應觸發(fā)數(shù)據鉆取或圖表轉換事件：首先對選定餅塊對應的數(shù)據集進行判斷，若該數(shù)據集有相應關系的下層數(shù)據，則進而調用對應用戶需求的鉆取函數(shù)或轉換函數(shù)（即參數(shù)變?yōu)橄聦訑?shù)據的對應基本圖表函數(shù)），從而重新繪制對應圖表；若該數(shù)據集沒有相應關系的下層數(shù)據，則彈出提示，提醒該交互事件無法繼續(xù)完成。
若是雙擊事件，則組件內部響應觸發(fā)恢復圖表事件：調用原始繪圖函數(shù)，恢復圖表初始狀態(tài)。
同理，該核心函數(shù)調用處理流程結構可以使用在不同類型的圖表的數(shù)據交互中，以此為根本完成組件的各類圖表的數(shù)據鉆取和相互轉換的對應類，供用戶選擇使用。
2.2.4簡單示例
用柱狀圖展現(xiàn)某學校網站用戶訪問源，如圖6（a）所示，可以看到通過A平臺訪問過來的有600人，繼而想知道所屬該平臺的學院訪問來源情況，通過點擊A平臺對應柱狀條，得到圖6（b）展示的在A平臺下來自各個學院的訪問來源數(shù)量，例如來自A3學院的有267人。
3結束語
隨著可視化技術在各個領域的不斷應用，一些拓展型的可視化組件相繼出現(xiàn)。本文在改進可視化模型的基礎上，以ECharts作為實現(xiàn)主體設計了支持基本圖表類型數(shù)據挖掘鉆取和相互轉換功能的可視化組件，可以方便應用于各類信息系統(tǒng)中，在實現(xiàn)基本圖表展現(xiàn)功能的同時，可以根據用戶需求進行拓展的數(shù)據交互，大大提高了用戶對數(shù)據的控制和溝通能力。
參考文獻
?。?］ 陳建軍, 于志強, 朱昀. 數(shù)據可視化技術及其應用［J］. 紅外與激光工程, 2001, 30(5):339342.
［2］ 屈華平, 李健. 可視化環(huán)境質量評估系統(tǒng)的設計與實現(xiàn)［J］. 微型機與應用, 2012, 31(3):1517.
?。?］ 陳鵬鵬. 移動互聯(lián)網下數(shù)據可視化技術及應用［J］. 智能計算機與應用, 2015,5(6):3841.