基于JS Charts實現Web應用數據的可視化

文/劉班

1 概述

數據分析是通過對大量數據的分析統(tǒng)計來預測事物發(fā)展趨勢的技術。但由于數據的文本化原始呈現，導致一般的用戶從這些抽象的數據中無法獲得自己所需要的重要信息。數據可視化技術的出現很好地解決了這個問題。該技術將通過數據分析技術得到的數據轉換為形象的圖表，通過這些圖表可以使得數據分析的結果得到形象展示。

JS Charts是一款使用Javascript語言開發(fā)的圖表生成組件，開發(fā)者可以通過該組件很容易地實現數據的可視化。該組件的運行不需要任何額外插件或者服務器端模塊。應用開發(fā)者只需要編寫少量的客戶端Javascript代碼就可以驅動JS Charts在Web瀏覽器中將來自前后端的數據轉換成各類常用圖表并顯示出來。

2 JS Charts的特點

JS Charts是一款免費的原生Javascript開源組件，具有良好的跨平臺性。其運行不需要任何服務器端插件和模塊的支持，能夠與現有Web應用程序實現無縫集成。開發(fā)者可以在許可證授權的情況下，根據自己的應用需求修改JS Charts的源代碼實現特定功能和效果。JS Charts提供的圖表類型豐富，包括了常見的柱狀圖、餅圖以及曲線圖，并支持各類圖表的動畫顯示功能，可以很容易地在IE、Firefox、Chrome、Safari、Opera等常見瀏覽器中顯示圖表效果。

3 JS Charts的使用

JS Charts的易用性非常好，應用開發(fā)者只需訪問官網http://www.jscharts.com下載支持文件jscharts.js，并將該文件包含到需要使用這個圖表庫的Javascript程序文件中即可。在jscharts.js文件中不僅包含了在Web瀏覽器中繪制圖表和文本所需要的庫，還包含了驅動IE瀏覽器繪圖所需的畫布函數。

JS Charts在繪制圖表之前，需要開發(fā)人員預先指定一個圖表容器，這個容器用于顯示圖表，可通過div標簽描述。然后借助語句var myChart=new JSChart('chartcontainer','line');將該div與指定圖表關聯起來，并指定圖表類型為line曲線圖，后期也可以根據應用需要更改為bar柱狀圖類型或pie餅圖類型。有了前面兩步的基礎，開發(fā)者就可以繼續(xù)為圖表的繪制準備數據了。JS Charts支持的數據形式有Javascript數組、JSON文件以及XML文件三種。其中，以Javascript數組形式的數據最為常見，另外兩種數據形式與數組形式的數據類似。在圖表中一般都至少包含一個數據系列，而一個數據系列又包含多個數據。因此，在數組形式的數據中通常需要再包含多個數組，內層包含的每一個一維數組可以用來描述圖表數據系列中的一個數據，內外兩層一維數組構成一個二維數組，準確描述圖表中包含的數據系列。這類二維數組一般通過語句var myData=new Array(['unit',20],['unit two',10],['unit three',30],['other unit',10],['last unit',30])；進行定義。除此以外，還需要使用JS Charts提供的setDataArray方法將數組數據加載到圖表中。不同類型的數據采用的加載方法是有差別的，JSON文件形式數據的加載方法是setDataJSON，XML文件形式數據的加載方法是setDataXML。

在圖表數據的支持下，開發(fā)者就可以通過調用JS Charts的draw方法實現圖表的繪制操作。為滿足開發(fā)者的個性化需要，JS Charts還提供了兩種定制圖表外觀的方法。一種方法是通過JS Charts內置的函數實現圖表外觀定制，開發(fā)人員可以選用不同的函數，并傳遞給這些函數具體的參數，來實現對圖表外觀的控制。另一種方法是通過選項組來實現定制，類似于編寫外觀配置文件，開發(fā)者可以將外觀配置選項組插入JSON格式數據文件或XML格式數據文件中，從而精確設置圖表各組成部分的外觀。

在JS Charts中，除了支持常規(guī)的單數據系列的圖表顯示功能之外，還支持多數據系列在同一個圖表中的對比顯示功能，可以讓開發(fā)者更為方便地開發(fā)出具有數據比較功能的圖表應用。在生成多數據系列的圖表中，JS Charts目前僅支持柱狀圖和曲線圖兩種圖表類型。在編寫這種特殊的多數據系列圖表生成代碼時，必須先提供多個數據系列所對應的數據。比如要生成同時顯示兩個數據系列的曲線圖表，采用數組形式的數據，那么就要將定義數據的代碼寫為var myData1=new Array(['unit',20],['unit two',10],['unit three',30],['other unit',10],['last unit',30])；var myData2=new Array(['unit',40],['unit two',20],['unit three',10],['other unit',50],['last unit',20])；的形式?？梢姡卸嗌賯€數據系列，就要定義多少組對應的數據。當使用XML文件形式的數據時，與數組形式的數據類似，要明確加上id屬性，實現對數據系列的區(qū)別控制。比如定義了曲線圖表對應的一個id為first line的數據系列。但在定義多系列柱狀圖表的時候，要將多數據系列的數據同時定義到一個二維數組中。比如將上面定義的包含兩個數據系列的曲線圖表轉換為柱形圖表時，就需要將數據定義改寫為var myData=new Array(['unit',20,40],['unit two',10,20],['unit three',30,10],['other unit',10,50],['last unit',30,20])；的形式，即將內層數組變成包含3個元素的一維數組。在加載這些數據系列的時候，也要注意設置一個能夠識別這些數據系列的名稱選項。比如在曲線圖表中加載上面定義的兩個數據系列時，要分別使用 setDataArray（myData1,‘line1’）;和setDataArray（myData1,‘line2’）;來實現。其中的字符串名稱line1和line2就是用來識別這兩個數據系列的標識，在定制這兩個數據系列外觀的時候就需要用這兩個標識來區(qū)別對應的兩個數據系列。當包含多數據系列的圖表顯示時，為了能給用戶清晰的數據比較呈現，通常都需要將圖表中多個數據系列對應的圖形圖像的外觀配置得具有明顯的視覺對比效果。定制曲線圖表時，只需要使用每個數據系列的標識就可以正確識別它們，但在定制柱狀圖表的時候，就應該使用編號來識別這些數據系列。比如要分別設置包含兩個數據系列的柱狀圖表背景顏色，那么就應寫為setBarColor(顏色1,1);和setBarColor(顏色2,2);的形式，其中的數字1和2分別對應兩個數據系列。這樣，通過視覺效果上適合的區(qū)別化定制操作，就可以生成清晰美觀，并且對比明顯的多數據系統(tǒng)數據圖表了。

4 結語

隨著大數據技術和數據分析技術的發(fā)展，各類計算機應用軟件對于數據可視化組件的需求越來越大。目前提供數據可視化的JS或HTML5組件雖然很多，但JS Charts作為一款輕量級的免費開源Javascript圖表腳本庫，憑借其豐富的功能、兼容性好、可定制性強以及易于使用的特點嶄露頭角，受到了越來越多的Web應用開發(fā)人員的喜愛。可以預見，隨著JS Charts的不斷完善，我們以后將會在更多的Web應用中看到使用JS Charts開發(fā)的圖表效果。