基于網絡的數據可視化研究與實現

趙巾幗，羅慶云

(湖南工學院 計算機與信息科學系，湖南 衡陽 421008)

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

1 數據可視化技術及主要特點

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

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

2 基于Web的數據可視化的參考模型

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

模型2和模型3需要針對具體的應用編制Java繪圖程序，模型4采用了復雜的可視化計算在服務器端處理，避免了客戶端較高的資源要求，同時客戶端又能完成可視化結果的交互繪制，具有較好的交互性以及計算負荷分攤的優點，但同樣編制程序復雜。而模型1使用TeeChart Pro ActiveX控件，可以直接安裝在服務器端，在服務器端動態生成圖形文件(JPEG格式)，然后將圖形傳回客戶端，在瀏覽器中顯示出來，方法可以適用于任何流行的客戶端瀏覽器。

3 基于網絡的數據可視化的實現

要將圖形顯示在瀏覽器上才能實現數據的可視化，但如果采用圖形的方式輸出結果，則不能直接生成網頁，這時可以把結果提交給可以輸出圖形的組件，再由組件完成圖形輸出。

3.1 TeeChart Pro ActiveX控件

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

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

2)可以直接存取ODBC數據源；

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

4)具有11種標準的和9種擴展的Series類型；

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

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

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

8)是集成化的設計工具。

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

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

TeeChart有一個重要的特點是：可以把圖表保存為一個JPEG格式的圖形文件。調用格式如下：

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

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

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

使用TeeChart Pro ActiveX組件創建圖表的過程：

1)創建對象；

Set TChart1 = CreateObject("TeeChart.TChart")

2)利用其屬性顯示一個靜態的統計圖形；

3)生成統計圖形文件；

TChart1.Export.SaveToJPEGFile

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

4)釋放對象，Set TChart1 = nothing

3.3利用TeeChart Pro ActiveX生成圖像方法的實例

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

首先，創建一個TeeChart組件對象，命名為Tchart1：

dim Tchart1;

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

然后對該對象的有關屬性進行初始化，設置標題、坐標提示和圖形大小及背景：

Tchart1.removeallseries;

//設置輸出圖形大小

TChart1.Height = 800;

TChart1.Width = 500;

//設置圖表總標題

TChart1.Header.Text.Clear

TChart1.Header.Text(0)= "季度銷售量統計"

TChart1.Header.Font.Size = 22

TChart1.Header.Font.Bold = True

TChart1.Header.Font.Italic = True

//設置縱坐標標題和坐標刻度

TChart1.Axis.Left.Title.Caption =

"產值(單位:萬元)"

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

//設置橫坐標標題和坐標刻度

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

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?

//設置圖形背景

TChart1.Panel.MarginLeft = 3

TChart1.Panel.Gradient.Visible = True

TChart1.Panel.Gradient.StartColor

= &HB3DEF

TChart1.Panel.Gradient.EndColor

= &HFACE87

至此，已經規定了坐標框架和圖形的基本面貌，下面對各系列進行遂一賦值，確定顯示結果，代碼如下：

TChart1.Series(0).Clear

//靜態向圖表中添加顯示數據,參數依次為數值大小,名稱,顏色

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

然后，就可以生成要求的圖形文件并達到在網頁中顯示的目的：

//把圖形文件名轉化成本地絕對路徑表達式

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

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

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

//在頁面中顯示該圖形

最后，釋放創建的對象：Set Tchart1=nothing；只要在B/S中的服務器端安裝TeeChart Pro控件，就能響應瀏覽器的請求，并將結果輸出為JPEG文件，然后傳回瀏覽器，實現網絡數據的可視化呈現。而且還可使用TeeChart Pro ActiveX組件從現有的數據庫中讀取動態的統計數據加并加以顯示。

4 結語

數據可視化通過圖像、圖形技術對數據進行形象化處理，通過信息技術對數據進行準確、實時、自動化的高度透明的處理。在實際項目中，將大量的數據以圖形人的方式在Web頁面上展現出來，有助于分析數據，揭示數據內部規律。隨著計算機圖形學、多媒體技術、人機交互技術及各應用領域的需要，數據可視化將會有更加廣闊的發展空間。

[參考文獻]

[1] 吳猛.基本Web的數據可視化技術的初探[J].福建電腦，2007(12):58-59.

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

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

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

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