基于JS Charts實(shí)現(xiàn)Web應(yīng)用數(shù)據(jù)的可視化

文/劉班

1 概述

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

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

2 JS Charts的特點(diǎn)

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

3 JS Charts的使用

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

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

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

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

4 結(jié)語

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