背景

數(shù)據(jù)可視化是大數(shù)據(jù)時(shí)代的重要技術(shù)，被認(rèn)為是大數(shù)據(jù)實(shí)現(xiàn)的“***一里”，良好的數(shù)據(jù)可視化實(shí)現(xiàn)可以讓用戶在海量的業(yè)務(wù)數(shù)據(jù)中高效的發(fā)現(xiàn)商業(yè)價(jià)值。數(shù)據(jù)可視化引擎為數(shù)據(jù)可視化的實(shí)現(xiàn)提供了圖形的展示與交互功能，目前業(yè)界有很多成熟的數(shù)據(jù)可視化引擎，如 Dojo charting、Google Viz 等。

Rave，即 Rapidly Adaptive Visualization Engine 是由 IBM 在 Grammar of Graphics 項(xiàng)目的基礎(chǔ)上開發(fā)的通用數(shù)據(jù)可視化引擎，可以在多種平臺(tái)上實(shí)現(xiàn)任意的圖形表示以及交互功能。Rave 目前已經(jīng)應(yīng)用在 IBM 的 Cognos、SPSS、Tivoli 等產(chǎn)品上，被證明可以很好地滿足用戶多樣化的商業(yè)及科學(xué)研究可視化需求。

本文主要介紹 Rave 的特性，圖形描述語言以及編程接口， 讀者通過本文可以了解如何使用 Rave 實(shí)現(xiàn)數(shù)據(jù)可視化以及使用 Rave 的優(yōu)勢(shì)。

為什么選擇 Rave

實(shí)現(xiàn)數(shù)據(jù)可視化是十分復(fù)雜的問題，可視化的需求來自科學(xué)研究、金融、零售、社會(huì)學(xué)等諸多領(lǐng)域，不同的業(yè)務(wù)需求催生了復(fù)雜的圖形表示，而傳統(tǒng)可視化引擎的圖形類型是固定的，不能夠按照用戶需要快速靈活的增加新圖形。另外，數(shù)據(jù)可視化的結(jié)果需要展現(xiàn)在不同的平臺(tái)上，包括桌面客戶端、Web 頁面以及不同的移動(dòng)平臺(tái)。而傳統(tǒng)的可視化引擎往往只支持一種或少數(shù)幾種平臺(tái)，不能滿足使用戶通過多種設(shè)備訪問數(shù)據(jù)分析結(jié)果的需求。

Rave 能夠很好的解決上述問題，為用戶提供強(qiáng)大而靈活的數(shù)據(jù)展示能力。

Rave 沒有提供任何內(nèi)置的圖形類型，而是提供了一種基于 JSON 語法的圖形表示語言，通過定義一系列可組合的特性集來描述所需的圖形。例如，餅圖的描述可以分解為切片定義、切片堆積、外觀和標(biāo)簽定義這幾個(gè)部分的集合。由表示語言描述的圖形定義（Specification）文件稱為 vizJSON 文件。JSON 技術(shù)為 vizJSON 提供了極大的靈活性：JSON 是 JavaScript 的原生格式，可以通過 JavaScript 代碼直接操作；JSON 是基于文本的數(shù)據(jù)交換格式，方便用戶編輯。用戶通過編寫 vizJSON 文件就可以設(shè)計(jì)出滿足需求的圖形，而不再限制于已經(jīng)設(shè)計(jì)好的圖形庫。Rave 理論上可以支持無限種類的圖形。

Rave 通過一套特殊的代碼生成機(jī)制實(shí)現(xiàn)跨平臺(tái)的數(shù)據(jù)可視化。Rave 引擎的核心代碼基于 Java，但是通過代碼生成機(jī)制可以在構(gòu)建時(shí)將通用的 Java 代碼轉(zhuǎn)換成 JavaScript 代碼，Object-C 代碼以及 Android 平臺(tái)上的 Java 代碼，繼而生成可以在 PC 桌面、Web 瀏覽器以及移動(dòng)設(shè)備 (iOS 或 Android) 等不同環(huán)境下運(yùn)行的圖形引擎版本。VizJSON 經(jīng)過 Rave 引擎生成可以渲染成最終圖形的場景樹（Scene Tree）：在Web瀏覽器中，場景樹需要 Dojo 的 GFX 庫進(jìn)行渲染，而 PC 桌面或移動(dòng)環(huán)境則由 Rave 自身的 Renderer 程序處理。因此，vizJSON 是平臺(tái)中立的，同一個(gè)vizJSON可以在不同的環(huán)境下生成一致的圖形。Rave 的基本架構(gòu)如下圖所示：

圖 1. Rave 架構(gòu)圖

Rave 提供了不同平臺(tái)使用的版本和相應(yīng)的編程接口（API），包括適用于 Web 應(yīng)用的 JavaScript API，適用于 iOS 設(shè)備的 Object-C API 以及適用于 Android 設(shè)備的 Java API，滿足用戶在不同環(huán)境下使用 Rave 的需求。本文以下將主要分析如何在 Web 應(yīng)用中使用 Rave 實(shí)現(xiàn)數(shù)據(jù)可視化。

如何在 Web 應(yīng)用中使用 Rave

Rave 提供了在 Web 瀏覽器中使用的發(fā)行版本以及相應(yīng)的 JavaScript 編程接口，使用戶可以在 Web 應(yīng)用中使用 Rave 進(jìn)行數(shù)據(jù)的可視化展示和交互。用戶可以從 IBM 官方網(wǎng)站上下載 Rave 的 Web 發(fā)行版，其代碼壓縮版本僅 680KB， 十分適合 Web 應(yīng)用加載。Rave 需要依賴 Dojo 的 GFX 庫實(shí)現(xiàn)跨瀏覽器的圖形渲染，圖形操作以及圖形交互，所以在 Rave 的 Web 發(fā)行版中包含兩個(gè)子目錄：dojo 和 rave。dojo 子目錄包含當(dāng)前 rave 支持的 Dojo 版本（目前是 Dojo1.80）。Rave 子目錄包括三個(gè)部分：實(shí)現(xiàn)核心功能的 main.js 文件，提供國際化支持的 nls 子目錄以及提供 vizJSON 模式（schema）文件的 resources 子目錄。

Rave 的代碼組織基于 Dojo 的 AMD ( 異步模塊定義 ) 機(jī)制，實(shí)現(xiàn)為一系列封裝良好的模塊，不同模塊代碼通過構(gòu)建（build）工具連接并壓縮成為一個(gè)單獨(dú)的 js 文件（即 main.js，AMD 稱其為層 layer），減少了加載 Rave 時(shí)的請(qǐng)求數(shù)目。此外，AMD 機(jī)制保證了 Rave 各模塊的異步加載，僅加載所需的模塊以及其依賴模塊，不需要的模塊則不會(huì)被加載，減少了 Rave 的加載時(shí)間。用戶在自己的 Web 應(yīng)用中可以通過 Dojo 的 require 接口加載 Rave 的 main.js 文件以及應(yīng)用所需要的各模塊。另外，由于 Rave 依賴 Dojo，所以用戶程序需要首先加載 Dojo 庫文件。

在 Web 瀏覽器環(huán)境下，Rave 可以指定使用不同的渲染器進(jìn)行圖形渲染，包括 canvas、 SVG、Silverlight 以及 VML 等，不同的渲染器與支持的瀏覽器類型及版本的對(duì)應(yīng)關(guān)系如下：

表 1. 渲染器與瀏覽器的對(duì)應(yīng)關(guān)系表

在加載 Dojo 和 Rave 時(shí)，用戶需要設(shè)置 Dojo 的 data-Dojo-config 配置對(duì)象，通過其 gfxRenderer 屬性指定 Rave 使用渲染器的優(yōu)先順序，保證 vizJSON 描述的圖形可以被不同的瀏覽器所渲染，配置示例如下：

清單 1. 渲染器配置示例

 <script type="text/javascript" src="../js/Dojo/Dojo/Dojo.js" 
data-Dojo-config="async:true, paths:{'com':'../../rave/com',     
'resources':'../../rave/resources'},gfxRenderer: 'canvas,svg,silverlight'">  
</script> 

加載和配置 Rave 之后，用戶就可以在 Web 應(yīng)用中使用 Rave 提供的所有功能實(shí)現(xiàn)數(shù)據(jù)可視化。以下將簡要介紹如何使用 Rave 的 JavaScript API 以及如何通過 vizJSON 設(shè)計(jì)可視化圖形。

如何使用 Rave 的 JavaScript API

Rave 的 JavaScript API 提供了 Dojo 控件（widget）VisControl，作為用戶的 Web 應(yīng)用程序調(diào)用 Rave 的核心接口。VisControl 是使用 Rave 實(shí)現(xiàn)數(shù)據(jù)可視化的首要對(duì)象，使用 Rave 的任何功能之前都必須首先創(chuàng)建 VisControl 對(duì)象，然后由 VisControl 對(duì)象調(diào)用其他對(duì)象協(xié)作完成可視化圖形的渲染和交互。VisControl 對(duì)象提供了大量可供用戶程序調(diào)用的方法，主要方法示例如下：

表 2 . visControl 對(duì)象方法列表

使用 VisControl 對(duì)象創(chuàng)建可視化圖形十分便捷，首先需要?jiǎng)?chuàng)建 VisControl 對(duì)象的實(shí)例：VisControl 本身實(shí)現(xiàn)為一個(gè) Dojo 控件，可以通過 Dojo 的 require 接口加載 VisControl 并實(shí)例化，代碼示例如下：

清單 2. 創(chuàng)建 visControl 對(duì)象示例

 <script type="text/javascript"> 
//使用嵌套的 requires調(diào)用并確保首先加載需要的 main.js  
    require(["rave/main"], function() {                                                 
           require(["com/ibm/init/ready", "com/ibm/vis/widget/VisControl"], function(ready, VisControl) { 
 
      //使用 ready方法可以保證 rave可以被正確的加載  
   ready(function() {  
                     var widget = new VisControl();  
                 });                                      
           });                             
    });  
</script> 

然后通過 Dojo 的 data-Dojo-type 屬性將 VisControl 控件附加給 HTML 頁面的元素（如 div），并設(shè)置初始大小。

清單 3. 頁面元素添加 visControl 控件示例

<div data-Dojo-type="com.ibm.vis.widget.VisControl"  
     id="visControl" style="width: 600px; height: 800px;"></div> 

***，創(chuàng)建圖形定義的 vizJSON 文件，并將其作為參數(shù)傳給 VisControl 對(duì)象的 setSpecification 方法。setSpecification 方法可以根據(jù) vizJSON 將圖形渲染到頁面的指定區(qū)域：

清單 4. 使用 visControl 對(duì)象創(chuàng)建圖形示例

 //使用 dijit/registry對(duì)象獲取 VisControl  
var visControl = registry.byId("visControl");  
visControl.initRenderer().then(function(widget) { 
//iniRenderer方法初始化渲染器并等待 widget開始渲染  
// visControl 根據(jù) vizJSON 繪制圖形到 widget 所在區(qū)域  
   visControl.setSpecification(vizJSON);  
}); 

在 VisControl 基礎(chǔ)上，Rave 的 JavaScript API 提供了很多對(duì)象用以實(shí)現(xiàn)更復(fù)雜的功能：Interactivity 和 Graph interactivity 對(duì)象可以獲取和修改圖形的屬性信息，添加交互行為；RaveEvent 和 RaveListener 對(duì)象可以向圖形添加事件和相應(yīng)的監(jiān)聽器；Effect 對(duì)象可以改變圖形的顯示效果；PanZoom 對(duì)象可以實(shí)現(xiàn)圖形在移動(dòng)設(shè)備上的放大縮小功能；Tooltips 對(duì)象可以向圖形添加描述信息。關(guān)于 JavaScript API 的更多信息，讀者可以參考 Rave 官方網(wǎng)站上的在線文檔。

如何使用 vizJSON 設(shè)計(jì)圖形

使用 Rave 設(shè)計(jì)可視化圖形的核心是 vizJSON，而 vizJSON 通過基于 JSON 語法的圖形描述語言，將圖形的構(gòu)成抽象成為可組合的 JSON 屬性集合。用戶通過編寫 vizJSON 文件，精心組織這些屬性設(shè)計(jì)出符合自己分析需求的可視化圖形。vizJSON 的主要屬性及描述如下：

表 3. vizJSON 屬性列表

vizJSON 中最關(guān)鍵的屬性是 data 和 grammar：

• data 屬性定義一張二維數(shù)據(jù)表，其中包含了圖形需要的所有數(shù)據(jù)。data 屬性有兩個(gè)主要的 section：域（fields）定義了數(shù)據(jù)表的元數(shù)據(jù)，列（rows）定義了實(shí)際的數(shù)據(jù)項(xiàng)。Data 屬性還可以通過 Data Provider 對(duì)象導(dǎo)入其他文件中的數(shù)據(jù)（如 CSV、Excel），作為圖形的數(shù)據(jù)源。

• grammar 屬性定義圖形的結(jié)構(gòu)。Grammar 屬性有兩個(gè)主要的 section：elements 和 coordinates。

  • Elements 定義了組成圖形的元素集合，包括元素的類型、位置、外觀以及屬性信息。Elements 支持的基本元素類型包括點(diǎn)（point）、區(qū)間（interval）、線（line）、多邊形（polygon）、區(qū)域（area）以及角（edge），復(fù)雜的圖形由這些簡單圖形元素組合而成。

  • Coordinates 通過基本的維度（dimensions）和變換（transformations）信息規(guī)定了繪制所有圖形元素的空間： dimensions 通過軸（axis）和度量（scale）值定義繪圖空間的輸出維度；transformations 定義圖形的變換方法，包括極化（polar）、堆積（stack）、群集（cluster）等，基本圖形通過變換可以組成更復(fù)雜的圖形。

下面例子演示了如何利用 vizJSON 定義柱狀圖：

圖 2. vizJSON 定義的柱狀圖

關(guān)于 vizJSON 的更多信息，讀者可以參考 Rave 官方網(wǎng)站上 vizJSON 的在線文檔。

結(jié)束語

您可以通過本文了解 IBM 的數(shù)據(jù)可視化引擎 Rave。本文簡述了 Rave 的應(yīng)用背景，架構(gòu)以及使用 Rave 實(shí)現(xiàn)數(shù)據(jù)可視化的優(yōu)勢(shì)。通過示例闡述了如何在您的 Web 應(yīng)用中使用 Rave，包括如何加載 Rave，如何使用 API 操作圖形以及如何利用 vizJSON 設(shè)計(jì)滿足需要的圖形。Rave 作為一款優(yōu)秀的數(shù)據(jù)可視化引擎，可以為您輕松地實(shí)現(xiàn)跨平臺(tái)的復(fù)雜數(shù)據(jù)可視化設(shè)計(jì)。