基于網(wǎng)絡(luò)的數(shù)據(jù)可視化研究與實(shí)現(xiàn)

趙巾幗，羅慶云

(湖南工學(xué)院 計(jì)算機(jī)與信息科學(xué)系，湖南 衡陽 421008)

隨著網(wǎng)絡(luò)應(yīng)用的普及，Web已經(jīng)成為存取信息的主要手段，人們面臨如何更快地瀏覽和分析www上的海量數(shù)據(jù)以及如何從中獲取有用信息的問題，其中數(shù)據(jù)的可視化描述是必不可少的。數(shù)據(jù)可視化技術(shù)將各種繁雜的數(shù)據(jù)轉(zhuǎn)換成直觀的圖形和圖像，顯示數(shù)據(jù)之間的關(guān)聯(lián)、走勢(shì)關(guān)系等，有利于展現(xiàn)隱藏在大量數(shù)據(jù)背后的規(guī)律，幫助人們處理海量數(shù)據(jù)，是科學(xué)研究和信息獲取的有效工具。

1 數(shù)據(jù)可視化技術(shù)及主要特點(diǎn)

數(shù)據(jù)可視化(Data Visual)技術(shù)[1]是指運(yùn)用計(jì)算機(jī)圖形學(xué)和圖像處理技術(shù)，將數(shù)據(jù)轉(zhuǎn)換為圖形或圖像在屏幕上顯示出來，并進(jìn)行交互處理的理論、方法和技術(shù)。它能夠提供多種同時(shí)進(jìn)行數(shù)據(jù)分析的圖形方法，反映信息模式、數(shù)據(jù)關(guān)聯(lián)或趨勢(shì)，幫助決策者直觀地觀察和分析數(shù)據(jù)，實(shí)現(xiàn)人與數(shù)據(jù)之間直接的信息傳遞，從而發(fā)現(xiàn)隱含在數(shù)據(jù)中的規(guī)律。數(shù)據(jù)可視化技術(shù)的基本思想是將數(shù)據(jù)庫中每一個(gè)數(shù)據(jù)項(xiàng)作為單個(gè)圖元元素來表示，大量的數(shù)據(jù)集構(gòu)成數(shù)據(jù)圖像，同時(shí)將數(shù)據(jù)的各個(gè)屬性值以多維數(shù)據(jù)的形式表示，可以從不同的維度觀察數(shù)據(jù)，從而對(duì)數(shù)據(jù)進(jìn)行更深入的觀察和分析。

數(shù)據(jù)可視化技術(shù)的主要特點(diǎn)[2]是：(1)交互性，用戶可以方便地以交互的方式管理和開發(fā)數(shù)據(jù)；(2)多維性，可以看到表示對(duì)象或事件的數(shù)據(jù)的多個(gè)屬性或變量，而數(shù)據(jù)可以按其每一堆的值，將其分類、排序、組合和顯示；(3)可視性，數(shù)據(jù)可以用圖像、曲線、二維圖形、三維體和動(dòng)畫來顯示，并可對(duì)其模式和相互關(guān)系進(jìn)行可視化分析。

2 基于Web的數(shù)據(jù)可視化的參考模型

基于Web的數(shù)據(jù)可視化主要有以下四種參考模型[3]：模型1，在服務(wù)器端生成描述數(shù)據(jù)的圖形，然后在客戶端實(shí)現(xiàn)圖形的顯示，客戶端用瀏覽器來顯示；模型2，服務(wù)器端經(jīng)過可視化映射后，輸出VRML(Virtual Reality Modeling Language，簡(jiǎn)稱VRML)成Java 3D格式的3D模型，返回給客戶，客戶端利用支持VRML或Java 3D的瀏覽器來繪制和操縱3D模型，這種方式的交互局限于繪制階段；模型3，客戶下載數(shù)據(jù)，在客戶端執(zhí)行可視化流水線，利用Java Applet實(shí)現(xiàn)可視化計(jì)算，客戶還可以下載可視化軟件。雖然客戶端可以完全控制可視化過程，但對(duì)客戶端的硬件、軟件資源要求高，并且對(duì)大規(guī)模過程的控制；模型4，服務(wù)器端以HTML Forms或Java Applet方式提供可視化控制頁面，瀏覽器客戶下載控制頁面，實(shí)現(xiàn)對(duì)可視化過程的控制。

模型2和模型3需要針對(duì)具體的應(yīng)用編制Java繪圖程序，模型4采用了復(fù)雜的可視化計(jì)算在服務(wù)器端處理，避免了客戶端較高的資源要求，同時(shí)客戶端又能完成可視化結(jié)果的交互繪制，具有較好的交互性以及計(jì)算負(fù)荷分?jǐn)偟膬?yōu)點(diǎn)，但同樣編制程序復(fù)雜。而模型1使用TeeChart Pro ActiveX控件，可以直接安裝在服務(wù)器端，在服務(wù)器端動(dòng)態(tài)生成圖形文件(JPEG格式)，然后將圖形傳回客戶端，在瀏覽器中顯示出來，方法可以適用于任何流行的客戶端瀏覽器。

3 基于網(wǎng)絡(luò)的數(shù)據(jù)可視化的實(shí)現(xiàn)

要將圖形顯示在瀏覽器上才能實(shí)現(xiàn)數(shù)據(jù)的可視化，但如果采用圖形的方式輸出結(jié)果，則不能直接生成網(wǎng)頁，這時(shí)可以把結(jié)果提交給可以輸出圖形的組件，再由組件完成圖形輸出。

3.1 TeeChart Pro ActiveX控件

TeeChart Pro ActiveX是西班牙Steema SL公司開發(fā)的圖表類控件，主要用來生成各種復(fù)雜的圖表。TeeChart Pro ActiveX支持B/S的開發(fā)模式，只需要安裝在服務(wù)器端，客戶端無需安裝其他軟件，只要通用使用瀏覽器即可顯示圖形。TeeChart Pro ActiveX具有以下特性[4]：

1)是32位ActiveX控件，可以在VB、Delphi、MS Office等多種編程環(huán)境下使用；

2)可以直接存取ODBC數(shù)據(jù)源；

3)直接訪問具有URL可尋址的圖表；

4)具有11種標(biāo)準(zhǔn)的和9種擴(kuò)展的Series類型；

5)支持2D和3D效果，支持縮放和滾動(dòng)；

6)可以將圖表輸出為Bitmap、Metafile、JPEG 或者Native Chart 格式；

7)支持用戶繪圖和打??；

8)是集成化的設(shè)計(jì)工具。

3.2 利用Teechart Pro ActiveX生成圖像的方法

使用Teechart Pro ActiveX組件在服務(wù)器端輸出圖形文件的設(shè)計(jì)思想。[5]包括以下三個(gè)步驟：第一步通過初始化確定圖形大小、背景和坐標(biāo)提示；第二步把數(shù)據(jù)按系列組織起來，一組數(shù)據(jù)對(duì)應(yīng)一個(gè)系列，該組件可以自動(dòng)以雷達(dá)圖或二維柱狀圖等多種形式來表示這些數(shù)據(jù)；第三步調(diào)用相應(yīng)的方法在服務(wù)器上形成指定的圖形文件。

TeeChart有一個(gè)重要的特點(diǎn)是：可以把圖表保存為一個(gè)JPEG格式的圖形文件。調(diào)用格式如下：

TChart.Export.SaveToJPEGFile (FileName,Gray,Performance,Quality,Width,Height)

為了解決在多用戶并發(fā)訪問Web的情況下，JPEG文件互相覆蓋的問題，可使用如下所示的一種JPEG文件的命名機(jī)制：

OutputJPEGFile="Chart"&Session.Sessionid&Replace(Time,".","")&".jpg"

使用TeeChart Pro ActiveX組件創(chuàng)建圖表的過程：

1)創(chuàng)建對(duì)象；

Set TChart1 = CreateObject("TeeChart.TChart")

2)利用其屬性顯示一個(gè)靜態(tài)的統(tǒng)計(jì)圖形；

3)生成統(tǒng)計(jì)圖形文件；

TChart1.Export.SaveToJPEGFile

Server.mappath("MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height

4)釋放對(duì)象，Set TChart1 = nothing

3.3利用TeeChart Pro ActiveX生成圖像方法的實(shí)例

下面以TeeChart組件來顯示"季度銷售量"情況的二維柱狀圖：

首先，創(chuàng)建一個(gè)TeeChart組件對(duì)象，命名為Tchart1：

dim Tchart1;

Set TChart1 =Server.CreateObject("TeeChart.TChart");

然后對(duì)該對(duì)象的有關(guān)屬性進(jìn)行初始化，設(shè)置標(biāo)題、坐標(biāo)提示和圖形大小及背景：

Tchart1.removeallseries;

//設(shè)置輸出圖形大小

TChart1.Height = 800;

TChart1.Width = 500;

//設(shè)置圖表總標(biāo)題

TChart1.Header.Text.Clear

TChart1.Header.Text(0)= "季度銷售量統(tǒng)計(jì)"

TChart1.Header.Font.Size = 22

TChart1.Header.Font.Bold = True

TChart1.Header.Font.Italic = True

//設(shè)置縱坐標(biāo)標(biāo)題和坐標(biāo)刻度

TChart1.Axis.Left.Title.Caption =

"產(chǎn)值(單位:萬元)"

TChart1.Axis.Left.Title.Font.Color=rgb(255,255,0)

TChart1.Axis.Left.Title.Font.Bold = True

TChart1.Axis.Left.Title.Font.Size = 9

TChart1.Axis.Left.Labels.Font.Color=rgb(255,255,0)

TChart1.Axis.Left.Labels.Font.Bold=true

TChart1.Axis.Left.Labels.Font.Size=10;

TChart1.Axis.Left.Title.Visible = True;

TChart1.Axis.Left.Labels.Angle = 90

//設(shè)置橫坐標(biāo)標(biāo)題和坐標(biāo)刻度

TChart1.Footer.Text.Add("圖表下標(biāo)題");

TChart1.Footer.Font.Color= rgb(255,255,0)

TChart1.Footer.Font.Size = 11

TChart1.Footer.Font.Bold = Tru e

TChart1.Footer.Font.Italic = False

TChart1.Axis.Bottom.Labe

ls.Font.Color= rgb(255,255,0)

TChart1.Axis.Bottom. Labels.Font.Bold = True

TChart1.Axis.Bottom. Labels.Font.Size= 10

TChart1.Axis.Bottom.Labels.Angle = 0?

//設(shè)置圖形背景

TChart1.Panel.MarginLeft = 3

TChart1.Panel.Gradient.Visible = True

TChart1.Panel.Gradient.StartColor

= &HB3DEF

TChart1.Panel.Gradient.EndColor

= &HFACE87

至此，已經(jīng)規(guī)定了坐標(biāo)框架和圖形的基本面貌，下面對(duì)各系列進(jìn)行遂一賦值，確定顯示結(jié)果，代碼如下：

TChart1.Series(0).Clear

//靜態(tài)向圖表中添加顯示數(shù)據(jù),參數(shù)依次為數(shù)值大小,名稱,顏色

TChart1.Series(0).Add 180,"1季度",RGB(35,70,128)

TChart1.Series(0).Add 240, "2季度",255

TChart1.Series(0).Add 210, "3季度",&HFACE87

TChart1.Series(0).Add 280, "4季度",16777215

TChart1.Axis.Depth.Visible= False

TChart1.Axis.DrawAxesBeforeSeries = False

然后，就可以生成要求的圖形文件并達(dá)到在網(wǎng)頁中顯示的目的：

//把圖形文件名轉(zhuǎn)化成本地絕對(duì)路徑表達(dá)式

Jpeglocafile=Server.mappath("mychart.jpg");

//把制定的圖形生成、存入本指定文件

TChart1.Export.SaveToJPEGFile Jpeglocalfile,False,JPEGBestQuality,100,TChart1.Width , TChart1.Height.

//在頁面中顯示該圖形

最后，釋放創(chuàng)建的對(duì)象：Set Tchart1=nothing；只要在B/S中的服務(wù)器端安裝TeeChart Pro控件，就能響應(yīng)瀏覽器的請(qǐng)求，并將結(jié)果輸出為JPEG文件，然后傳回瀏覽器，實(shí)現(xiàn)網(wǎng)絡(luò)數(shù)據(jù)的可視化呈現(xiàn)。而且還可使用TeeChart Pro ActiveX組件從現(xiàn)有的數(shù)據(jù)庫中讀取動(dòng)態(tài)的統(tǒng)計(jì)數(shù)據(jù)加并加以顯示。

4 結(jié)語

數(shù)據(jù)可視化通過圖像、圖形技術(shù)對(duì)數(shù)據(jù)進(jìn)行形象化處理，通過信息技術(shù)對(duì)數(shù)據(jù)進(jìn)行準(zhǔn)確、實(shí)時(shí)、自動(dòng)化的高度透明的處理。在實(shí)際項(xiàng)目中，將大量的數(shù)據(jù)以圖形人的方式在Web頁面上展現(xiàn)出來，有助于分析數(shù)據(jù)，揭示數(shù)據(jù)內(nèi)部規(guī)律。隨著計(jì)算機(jī)圖形學(xué)、多媒體技術(shù)、人機(jī)交互技術(shù)及各應(yīng)用領(lǐng)域的需要，數(shù)據(jù)可視化將會(huì)有更加廣闊的發(fā)展空間。

[參考文獻(xiàn)]

[1] 吳猛.基本W(wǎng)eb的數(shù)據(jù)可視化技術(shù)的初探[J].福建電腦，2007(12):58-59.

[2] 任永功,于戈.數(shù)據(jù)可視化技術(shù)的研究和進(jìn)展[J].計(jì)算機(jī)科學(xué),2004,31(12):92-95.

[3] 王媛媛,丁毅.數(shù)據(jù)可視化技術(shù)的實(shí)現(xiàn)方法研究[J].現(xiàn)化電子技術(shù),2007(4):71-74.

[4] 殷劍宏.TeeChart控件[EB/OL].http://www.ithome-cn.net/technology/asp/asp024.htm,2009-03-08.

[5] 屈景暉.TeeChar應(yīng)用技術(shù)詳解—快速圖表制作工具[M].北京:中國水利水電出版社,2008:35-66.