移動(dòng)互聯(lián)網(wǎng)下數(shù)據(jù)可視化及應(yīng)用

摘要：隨著移動(dòng)帶寬技術(shù)的發(fā)展，更多的傳感設(shè)備、移動(dòng)終端隨時(shí)隨地地接入網(wǎng)絡(luò)。針對(duì)移動(dòng)終端設(shè)備下的數(shù)據(jù)可視化是可視化技術(shù)在移動(dòng)終端應(yīng)用中提出的一種新的數(shù)據(jù)分析和處理技術(shù)。本文介紹了數(shù)據(jù)可視化的概念以及模型，提出了一種移動(dòng)終端下的具有交互功能的數(shù)據(jù)可視化回路模型，并給出了電子商務(wù)數(shù)據(jù)在移動(dòng)終端的可視化的應(yīng)用。實(shí)驗(yàn)表明該數(shù)據(jù)可視化技術(shù)借助圖形化手段，會(huì)生成直觀的比較結(jié)果，通過按需加載的模式能夠顯著的提升性能，提高用戶的體驗(yàn)指數(shù).

關(guān)鍵詞：移動(dòng)互聯(lián)網(wǎng)；數(shù)據(jù)可視化；AMD異步加載技術(shù)；信息可視化

中國(guó)分類號(hào)：TP391 文獻(xiàn)標(biāo)識(shí)碼：A

Abstract： With the rapid promotion of the mobile bandwidth technology， more sensing devices and mobile terminals gain access to networks. The data visualization of the mobile terminal equipment is the new technology proposed in mobile terminal applications for data analysis and processing by visualization technology.

This paper introduces the concept of data visualization and models. It has put forward a kind of implementation pattern about data visualization in the mobile terminal and e-commerce data are given in the visualizationof the application of the mobile terminal. The experiment shows that it will generate the intuitive comparison results with the help of a graphical method in the mobileInternet. Through uploading the model， it can significantly improve performance and enhance users experience index.

Keywords： Mobile Internet； Data Visualization； Asynchronous Module Definition； Information Visualization

0 引言

早在20世紀(jì)70年代，桌面操作系統(tǒng)、計(jì)算機(jī)圖形學(xué)、圖形顯示設(shè)備、人機(jī)交互等技術(shù)的發(fā)展推啟了人們對(duì)移動(dòng)互聯(lián)網(wǎng)下數(shù)據(jù)可視化技術(shù)應(yīng)用的現(xiàn)實(shí)研究風(fēng)潮。處理范圍從簡(jiǎn)單的統(tǒng)計(jì)數(shù)據(jù)擴(kuò)展到更為復(fù)雜的網(wǎng)絡(luò)層次、數(shù)據(jù)庫、文本等非結(jié)構(gòu)化與高緯度數(shù)據(jù)[1]。1986年10月，在美國(guó)國(guó)家科學(xué)基金會(huì)的“圖形圖像處理和工作站”討論會(huì)上，提出了“科學(xué)計(jì)算可視化”（Visualizationin Sciencific Computation，ViSC）[2]。此后，國(guó)內(nèi)的各大科研單位開始在數(shù)據(jù)可視化領(lǐng)域投入了可觀的精力，為應(yīng)用領(lǐng)域認(rèn)識(shí)和使用數(shù)據(jù)可視化奠定了堅(jiān)實(shí)的基礎(chǔ)。近年來，在我國(guó)互聯(lián)網(wǎng)的發(fā)展過程中，人們迫切希望能夠隨時(shí)隨地從互聯(lián)網(wǎng)中獲取信息和服務(wù)，移動(dòng)互聯(lián)網(wǎng)[3]應(yīng)運(yùn)而生并在移動(dòng)網(wǎng)絡(luò)[4]、移動(dòng)游戲、移動(dòng)即時(shí)通信[5]、移動(dòng)購(gòu)物、移動(dòng)支付[6]等方面迅猛發(fā)展。然而數(shù)據(jù)可視化在移動(dòng)端的發(fā)展并不順利，張青等人在文獻(xiàn)[7]中提出移動(dòng)互聯(lián)網(wǎng)端的可視化具有重大的信息價(jià)值但卻仍然存在以下問題：（1）如何提供給用戶更好的交互方式；（2）如何為決策提供更為直觀的依據(jù)；曾悠在文獻(xiàn)[8]中描述了現(xiàn)階段可視化存在的問題：如何實(shí)現(xiàn)高性能的海量數(shù)據(jù)展示，減少用戶的等待時(shí)間和應(yīng)該運(yùn)用什么樣的繪圖技術(shù)；吳佳鑫 在 文獻(xiàn)[9]中提出早期數(shù)據(jù)可視化模型主要以流水線模型為主，具體描述了從數(shù)據(jù)空間到可視空間的映射，包含串行處理數(shù)據(jù)的各個(gè)階段：數(shù)據(jù)分析、數(shù)據(jù)過濾[10]、數(shù)據(jù)可視化映射和繪制，但缺少了用戶的交互功能。鑒于此，本文首先提出了一種將流水線改進(jìn)成回路的數(shù)據(jù)可視化模型，增加了用戶和數(shù)據(jù)交互的功能；其次分析了Canvas繪圖技術(shù)的優(yōu)缺點(diǎn)，并針對(duì)移動(dòng)平臺(tái)，采用一種基于Canvas的數(shù)據(jù)驅(qū)動(dòng)可視化工具echart.js，遵循AMD（Asynchronous Module Definition）異步加載規(guī)范，傳遞JSON（JavaScript Object Notation）數(shù)據(jù)，實(shí)現(xiàn)圖形界面的按需加載。該模式具有更強(qiáng)的可擴(kuò)展性和可維護(hù)性，能夠顯著提升性能。

1相關(guān)技術(shù)

數(shù)據(jù)可視化是指利用人眼的感知能力對(duì)數(shù)據(jù)進(jìn)行交互的可視表達(dá)以增強(qiáng)認(rèn)知的技術(shù)，能夠?qū)⒉豢梢娀螂y以直接顯示的數(shù)據(jù)轉(zhuǎn)化為可感知的圖形、符號(hào)、顏色、紋理等增強(qiáng)數(shù)據(jù)的識(shí)別效率傳遞有效信息[8]。數(shù)據(jù)可視化涉及到數(shù)據(jù)可視化模型以及與其相關(guān)的一系列技術(shù)。

1.1數(shù)據(jù)可視化中的流水線模型

早期的數(shù)據(jù)可視化主要是以流水線模型為主，重點(diǎn)描述了從數(shù)據(jù)空間到可視空間的映射，包含串行處理數(shù)據(jù)的各個(gè)階段：數(shù)據(jù)分析、數(shù)據(jù)過濾、數(shù)據(jù)可視化映射和繪制。該流水線實(shí)際上是數(shù)據(jù)處理和圖形繪制的嵌套組合[11]。如圖1所示。

1.2 Canvas繪圖技術(shù)

Canvas最初是由蘋果公司內(nèi)部使用自己的Mac OS X Webkit引擎進(jìn)行設(shè)計(jì)、并組織推出的，蘋果大力推廣使用HTML5，促進(jìn)了Canvas的發(fā)展和應(yīng)用[12]。HTML5提供了畫布元素，同時(shí)HTML5定義了很多API支持腳本化客戶端繪圖操作。Canvas標(biāo)簽和 SVG 以及 VML 之間的一個(gè)重要的不同就在于， SVG 和 VML 使用一個(gè) XML 文檔來描述繪圖。SVG 繪圖很容易編輯，只要從其描述中移除元素即可做到。而Canvas則是 通過 JavaScript 來繪制 2D 圖形的。標(biāo)簽中移除元素，往往需要擦掉繪圖，并進(jìn)行重新繪制。而Canvas以位圖為基礎(chǔ)，決定了其在綻放處理方面要比SVG的適用性略差。Canvas不允許JavaScript使用其本身之外的任何API來執(zhí)行外部操縱。另外，盡管改善其特性的工作正在進(jìn)行中，但是Canvas適用于圖像操縱，并且基于其不訪問DOM的特點(diǎn)，所以對(duì)于在網(wǎng)頁上各個(gè)方位快速移動(dòng)多個(gè)項(xiàng)目，Canvas表現(xiàn)出可見的良好性能，這即使得其作用將愈顯突出。

1.3esl加載器技術(shù)

esl是一款瀏覽器端、符合AMD（Asynchronous Module Definition）的標(biāo)準(zhǔn)加載器， 完整描述了模塊的定義，依賴關(guān)系，引用關(guān)系以及加載機(jī)制，適合現(xiàn)代Web瀏覽器端應(yīng)用的入口與模塊管理。

AMD（ Asynchronous Module Definition）是一種用于動(dòng)態(tài)加載JavaScript代碼的API 規(guī)范。 該規(guī)范提出了一種基于模塊的異步加載JavaScript 代碼的機(jī)制，通過將代碼封裝進(jìn)一個(gè)個(gè)模塊，即取得模塊的引用[11]。

1.4JSON數(shù)據(jù)格式

JSON數(shù)據(jù)格式是一個(gè)無序的“名稱/值”對(duì)集合。一個(gè)對(duì)象以“{”開始，“}”結(jié)束，每個(gè)“名稱”后跟一個(gè)“：”，“名稱”使用“”括起來，“名稱/值”之間使用”，”將其分隔。

下面是一個(gè)簡(jiǎn)單的示例：

var user = {“username”： “Jim”，”age”： 25，”sex”：”male”}；

這個(gè)對(duì)象包含了3個(gè)元素username、age、sex，其對(duì)應(yīng)的值分別是Jim、25、male。JSON作為一種輕量級(jí)的數(shù)據(jù)交換格式，不僅具有更輕巧、更友好的Web客戶端的格式，同時(shí)易于機(jī)器生成和解析，這些特性使得JSON成為理想的數(shù)據(jù)交換格式，適用于服務(wù)器與移動(dòng)端的交互。

2數(shù)據(jù)可視化回路模型的研究

2.1數(shù)據(jù)可視化回路模型

針對(duì)于1.1節(jié)中“數(shù)據(jù)可視化流水線模型”缺少了用戶交互功能，故本文在此提出了一種數(shù)據(jù)可視化回路模型。模型將流水線改進(jìn)成回路后，用戶的交互可以出現(xiàn)在流程的任何階段，如圖2所示。

該數(shù)據(jù)可視化回路模型的結(jié)構(gòu)分為兩大類：可視化呈現(xiàn)和用戶交互。

首先，可視化呈現(xiàn)的過程可詳述如下：

（1）選擇呈現(xiàn)維度（select）。了解與選擇可視化呈現(xiàn)的數(shù)據(jù)集。

（2）數(shù)據(jù)的預(yù)處理（Pre-processing）。對(duì)輸入數(shù)據(jù)集進(jìn)行預(yù)處理，消除錯(cuò)誤，彌補(bǔ)缺失的信息。

（3）抽取對(duì)應(yīng)的數(shù)據(jù)集（Data mining）。在海量、清晰的數(shù)據(jù)集中抽取相對(duì)應(yīng)的數(shù)據(jù)集，形成可視數(shù)據(jù)。

（4）利用canvas、SVG等進(jìn)行繪圖（Plotting）。將數(shù)據(jù)進(jìn)行分析繪制形成相應(yīng)的可視化視圖，呈現(xiàn)給用戶。

其次，關(guān)于交互的過程則給出如下描述：

（1）用戶可通過UI界面進(jìn)行數(shù)據(jù)的更改，形成新的數(shù)據(jù)進(jìn)行可視化操作。

（2）用戶可對(duì)數(shù)據(jù)進(jìn)行過濾、顏色、大小、布局進(jìn)行更改，形成新的可視化圖形。

（3）用戶可以更改繪制器，進(jìn)行新的數(shù)據(jù)可視化操作。

2.2移動(dòng)互聯(lián)網(wǎng)下數(shù)據(jù)可視化交互模式

本數(shù)據(jù)可視化回路模型采用異步加載的交互模式如圖3所示。

由圖3可知，該模式是基于數(shù)據(jù)驅(qū)動(dòng)的。實(shí)現(xiàn)中，主要依靠服務(wù)器提供相關(guān)的數(shù)據(jù)，通過internet向客戶端傳輸指定的JSON數(shù)據(jù)。當(dāng)手機(jī)瀏覽器接收到服務(wù)器端傳來的JSON數(shù)據(jù)后，即通過esl.js按需加載echart-bar.js生成柱狀可視圖，同時(shí)一并按需加載echart-line.js生成折線數(shù)據(jù)可視圖。利用如上的按需加載特性，服務(wù)器端傳來的JSON數(shù)據(jù)將可渲染出指定圖形，從而能夠顯著提升性能。esl.js加載代碼如下：

require（[

'echarts'，

'echarts/chart/line'，

'echarts/chart/bar'

]）

3.移動(dòng)互聯(lián)網(wǎng)下數(shù)據(jù)可視化應(yīng)用

3.1 canvas數(shù)據(jù)格式

本應(yīng)用根據(jù)2014年5～10月淘寶天貓的銷售信息數(shù)據(jù)，包含男裝、女裝、童裝、內(nèi)衣、家紡等數(shù)據(jù)。首先定義數(shù)據(jù)集對(duì)象和數(shù)據(jù)化對(duì)象，數(shù)據(jù)集對(duì)象是指所有維度的可視化對(duì)象接收的數(shù)據(jù)；數(shù)據(jù)化對(duì)象則表示了指定維度的數(shù)據(jù)對(duì)象。將數(shù)據(jù)集對(duì)象過濾抽取出數(shù)據(jù)化對(duì)象，完成在瀏覽器中的圖形渲染，得到數(shù)據(jù)可視化結(jié)果。可視化對(duì)象由多個(gè)Canvas組件構(gòu)成，考慮到代碼重用性，即根據(jù)可視化圖形的不同Canvas組件定義不同的模塊，模塊分為接收數(shù)據(jù)Canvas組件和不接收數(shù)據(jù)的Canvas組件兩種，通過對(duì)固定組件進(jìn)行不同組合，可以得到多樣的數(shù)據(jù)可視化結(jié)果。

對(duì)于不同模塊圖形的渲染，可以不局限于使用每一Canvas組件，考慮到Canvas性能和esl.js按需加載的特性，可以選擇適合的、且所需的echarts圖表在移動(dòng)端渲染可視化要求涉及的圖形界面。

數(shù)據(jù)集對(duì)象需要完成對(duì)數(shù)據(jù)源的預(yù)處理，從服務(wù)器端返回的數(shù)據(jù)源一定是JSON格式數(shù)據(jù)，數(shù)據(jù)集對(duì)象則需要提供特定的API構(gòu)造成可視化對(duì)象option，并調(diào)用echarts指定方法進(jìn)行圖像的渲染。可視化對(duì)象數(shù)據(jù)的定義格式如下：

var option = {

title ： {

text： '14年5月至10月'，

subtext： '淘寶天貓部分家紡用品銷售額'

}，

legend： { data：['水星家紡'，'富安娜'] }，

calculable ： true，

xAxis ： [{

type ： 'category'， boundaryGap ： false，

data ： ['5月'，'6月'，'7月'，'8月'，'9月'，'10月']

}]，

yAxis ： [{

type ： 'value'，

axisLabel ： {

formatter： '{value}萬元'

}，

splitNumber：5

}]，

series ： [{

name：'水星家紡'，

type：'line'，

data：[5269， 4819， 3171， 3720， 4868， 4759]，

}，

{

name：'富安娜'，

type：'line'，

data：[3417， 5399， 3813， 5004， 6638， 8359]，

}

]}；

其中{}表示對(duì)象，[]表示數(shù)組，相應(yīng)的模塊并非全部需要，可以按照自身需求設(shè)計(jì)符合期望的可視化產(chǎn)品。

3.2移動(dòng)互聯(lián)網(wǎng)下數(shù)據(jù)可視化的實(shí)現(xiàn)

文字描述較為抽象，而圖形圖像的展示相對(duì)來說要更為生動(dòng)形象、直觀。通過數(shù)據(jù)可視化將數(shù)據(jù)進(jìn)行更加清晰的站線，有效地傳遞信息，幫助用戶從中發(fā)現(xiàn)關(guān)系、規(guī)律、趨勢(shì)。本文基于echarts.js提供了豐富的Canvas類庫，將數(shù)據(jù)的格式封裝到option對(duì)象中，調(diào)用echart.js類庫中的setoption（）方法進(jìn)行指定數(shù)據(jù)可視化的渲染。同時(shí)將電子商務(wù)的部分?jǐn)?shù)據(jù)進(jìn)行可視化分析處理，其中一組結(jié)果示例如圖5所示。通過數(shù)據(jù)的橫向和縱向比較，可以明白看出電子商務(wù)發(fā)展?fàn)顩r的總體趨勢(shì)。從折線圖中就已真實(shí)反映出：富安娜家銷售金額在5～10月有大幅度的增長(zhǎng)，水星家紡5～10月銷售金額有小幅的下降，夢(mèng)潔家紡、恒源祥多喜愛、北極熊家紡5～10月份銷售金額在2000萬元左右，表現(xiàn)平穩(wěn)。數(shù)據(jù)可視化目標(biāo)就是讓用戶和系統(tǒng)之間可以進(jìn)行和實(shí)現(xiàn)交互，echarts.js作為一個(gè)優(yōu)秀的可視化工具，提供了一套對(duì)數(shù)據(jù)交互的事件，當(dāng)用戶點(diǎn)擊數(shù)據(jù)視圖按鈕時(shí)將可直接呈現(xiàn)可視化背后的數(shù)據(jù)，如圖6所示。通過將數(shù)據(jù)呈現(xiàn)給用戶，用戶可對(duì)這些數(shù)據(jù)進(jìn)行修改，而后進(jìn)入新的一輪的數(shù)據(jù)可視化渲染，從而大大提升了用戶的體驗(yàn)指數(shù)。

4結(jié)束語

在移動(dòng)互聯(lián)網(wǎng)下數(shù)據(jù)可視化的發(fā)展是可視化研究領(lǐng)域的技術(shù)關(guān)注重點(diǎn)，本文提出了一種輕量級(jí)JSON數(shù)據(jù)傳輸，按需異步加載模式應(yīng)用到移動(dòng)互聯(lián)網(wǎng)中，對(duì)性能的提升具有顯著的效果。移動(dòng)互聯(lián)網(wǎng)下的數(shù)據(jù)可視化作為一種新興技術(shù)正在蓬勃發(fā)展，并與虛擬現(xiàn)實(shí)技術(shù)、計(jì)算機(jī)動(dòng)畫技術(shù)、人工智能、數(shù)據(jù)挖掘、數(shù)字地球、經(jīng)濟(jì)趨勢(shì)，甚至與人類基因組計(jì)劃等誘人的前沿學(xué)科領(lǐng)域都有密切的聯(lián)系。如何有效處理和解釋這些包含豐富信息的海量數(shù)據(jù)是學(xué)界目前面臨的巨大挑戰(zhàn)，同時(shí)，這其中也蘊(yùn)含這數(shù)據(jù)可視化技術(shù)所呈現(xiàn)給未來研究的艱巨卻矚目的成就及應(yīng)用前景[13]。

參考文獻(xiàn)：

[1]HABER RB，MCNABB DA.Visualization idioms：A conceptual model for scientific Visualization systems[C]//Visualization in Scientific Computing，[S.l.]：IEEE，1990：74-93.

[2]CHEN Wei，DING Ziang，ZHANG Song，et al.A Novel Interface for interractive exploration of DTI fibers[J].IEEE Transations on Visualization and Computer Graphics，2012，15（6）：1433-1440.

[3]王文宇，劉玉紅. 移動(dòng)互聯(lián)網(wǎng)終端安全分析與研究[J].計(jì)算機(jī)安全，2011（12）：21-23.

[4]郝龍. 移動(dòng)網(wǎng)絡(luò)中即時(shí)通信業(yè)務(wù)特點(diǎn)的研究及端到端的優(yōu)化[D].北京：北京郵電大學(xué)， 2012：4-5.

[5]T.Munzner，A nested model for visualzation design and valization[J].IEEE TransationVisualization and Computer Graphics， 2009，15（6）：921-928.

[6]謝雪梅，高艷苗. 用戶移動(dòng)支付行為習(xí)慣成因研究[J].北京郵電學(xué)報(bào)（社會(huì)科學(xué)版）， 2013， 15（5）：33-37.

[7]張青，陶彩霞，陳翀. 移動(dòng)互聯(lián)網(wǎng)數(shù)據(jù)可視化技術(shù)及應(yīng)用研究[J]. 電信科學(xué)， 2014， 30（10）：8-14.

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

[9]楊海霞. 基于改進(jìn)數(shù)據(jù)過濾算法的異構(gòu)數(shù)據(jù)庫優(yōu)化挖掘技術(shù)[J]. 科技通報(bào)，2013 （6）：125-127.

[10]曾悠. 大數(shù)據(jù)時(shí)代背景下的數(shù)據(jù)可視化概念研究[D]. 杭州：浙江大學(xué)，2014.

[11]劉大海. 海量數(shù)據(jù)可視化方法的研究[D]. 天津：天津大學(xué) ，2014.

[12]朱文. 基于HTML5Canvas技術(shù)的在線圖像處理方法的研究[D]. 廣州：華南理工大學(xué)， 2013.

[13]賀全兵. 可視化技術(shù)的發(fā)展及應(yīng)用[J].中國(guó)西部科技，2012（4）：4-7.