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

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

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

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

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

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

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

1.2 Canvas繪圖技術(shù)

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

1.3esl加載器技術(shù)

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

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

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

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

下面是一個簡單的示例：

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

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

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

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

針對于1.1節(jié)中“數(shù)據(jù)可視化流水線模型”缺少了用戶交互功能，故本文在此提出了一種數(shù)據(jù)可視化回路模型。模型將流水線改進成回路后，用戶的交互可以出現(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）。對輸入數(shù)據(jù)集進行預(yù)處理，消除錯誤，彌補缺失的信息。

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

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

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

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

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

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

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

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

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

require（[

'echarts'，

'echarts/chart/line'，

'echarts/chart/bar'

]）

3.移動互聯(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ù)集對象和數(shù)據(jù)化對象，數(shù)據(jù)集對象是指所有維度的可視化對象接收的數(shù)據(jù)；數(shù)據(jù)化對象則表示了指定維度的數(shù)據(jù)對象。將數(shù)據(jù)集對象過濾抽取出數(shù)據(jù)化對象，完成在瀏覽器中的圖形渲染，得到數(shù)據(jù)可視化結(jié)果?？梢暬瘜ο笥啥鄠€Canvas組件構(gòu)成，考慮到代碼重用性，即根據(jù)可視化圖形的不同Canvas組件定義不同的模塊，模塊分為接收數(shù)據(jù)Canvas組件和不接收數(shù)據(jù)的Canvas組件兩種，通過對固定組件進行不同組合，可以得到多樣的數(shù)據(jù)可視化結(jié)果。

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

數(shù)據(jù)集對象需要完成對數(shù)據(jù)源的預(yù)處理，從服務(wù)器端返回的數(shù)據(jù)源一定是JSON格式數(shù)據(jù)，數(shù)據(jù)集對象則需要提供特定的API構(gòu)造成可視化對象option，并調(diào)用echarts指定方法進行圖像的渲染?？梢暬瘜ο髷?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]，

}

]}；

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

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

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

4結(jié)束語

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

參考文獻：

[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]王文宇，劉玉紅. 移動互聯(lián)網(wǎng)終端安全分析與研究[J].計算機安全，2011（12）：21-23.

[4]郝龍. 移動網(wǎng)絡(luò)中即時通信業(yè)務(wù)特點的研究及端到端的優(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]謝雪梅，高艷苗. 用戶移動支付行為習(xí)慣成因研究[J].北京郵電學(xué)報（社會科學(xué)版）， 2013， 15（5）：33-37.

[7]張青，陶彩霞，陳翀. 移動互聯(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]楊海霞. 基于改進數(shù)據(jù)過濾算法的異構(gòu)數(shù)據(jù)庫優(yōu)化挖掘技術(shù)[J]. 科技通報，2013 （6）：125-127.

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

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

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

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