基于网络的数据可视化研究与实现

赵巾帼，罗庆云

(湖南工学院 计算机与信息科学系，湖南 衡阳 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.