设计背景
基于服务器/浏览器架构的解决方案在越来越多的领域得到应用。使用ASP脚本,我们可以方便地访问各种数据库,生成与用户交互的动态页面。一般情况下,由浏览器解释要显示的结果,其中统计数据的显示结果一般采用HTML表格形式。
笔者在铁路车站Intranet系统的开发过程中,遇到要把数据库中的统计结果用统计图表(柱状图、折线图、饼图等)方式输出的问题。因为统计图表在美观和易于理解等方面有着表格所不具备的优越性,所以这个问题具有一定的普遍性。目前,针对这个问题,主要有3种可行的解决方案:
1.在浏览器端安装使用图表控件如MsChart等。这样做的缺点是在客户端要安装和注册ActiveX控件,操作较为复杂,并且把客户端系统限制在Windows的范围内。
2.使用Java Applet显示图形。这样做开发难度较高,需要针对具体的应用要求编制Java绘图程序。
3.在服务器端使用控件动态生成图形文件(JPEG格式),此方法可以适用于任何流行的客户端浏览器。
本文讨论第3种方案,使用的控件是TeeChart Pro ActiveX 4.0版。
TeeChart控件
TeeChart Pro ActiveX是西班牙Steema SL公司开发的图表类控件,主要用来生成各种复杂的图表。熟悉Delphi和C++ Builder的编程人员对它不会陌生,因为在Delphi和C++ Builder里包括了TeeChart的VCL版本。本文使用的是TeeChart Pro ActiveX 4.0,它的测试版可以从www.teechart.com网站下载。
TeeChart Pro ActiveX 4.0的主要特性如下:
是32位ActiveX控件,可以在VB、Delphi、MS Office等多种编程环境下使用;
可以直接存取ODBC数据源;
具有11种标准的和9种扩展的Series类型;
提供16种统计函数;
支持2D和3D效果,支持缩放和滚动;
可以将图表输出为Bitmap、Metafile、JPEG 或者Native Chart 格式;
支持用户绘图和打印;
是集成化的设计工具;
提供例子和在线帮助。
TeeChart Pro ActiveX 4.0的这些特性使得它具有极大的灵活性,并且使用起来非常方便,只要写很少的代码,就可以做出各种复杂、漂亮的图表。
TeeChart类的属性和方法
TeeChart的主类是TChart。TChart中使用了56个类、325个属性、125个方法以及28个事件,这使得TChart具有非常强大的功能。本文仅简单地介绍其中一些重要类的属性和方法。
TChart.Height:图表的高度(像素);
TChart.Width:图表的宽度(像素);
TChart.Header:图表的题头(Ititles类);
TChart.Series:序列(Series类的数组);
TChart.Axes:坐标轴(Iaxes类);
TChart.Legend:图例(Legend类);
TChart.Panel:面板(Ipanel类);
TChart.Canvas:画布(Canvas类)。
Series是要显示的数据的主体。在一个图表中可以有一个或多个序列,每个序列可以有不同的显示类型,如Line、Bar、Pie等等。
Axes控制图表坐标轴的属性,在缺省的情况下,坐标轴可以自动地根据不同的数据设置好标度范围和间隔,当然也可以手工调整。
Legend控制图表的图例显示。Legend是图表中的一个长方形的用来显示图例标注的区域。可以标注Series的名称或者Series中的项目和数值。
Panel可以设置图表的背景。可以使用渐变的颜色或者图像文件作为整个图表的背景
Canvas可以让设计者绘制自己的图形。使用方法和Delphi中的Canvas一样。有TextOut、LineTo、Arc等各种画图的方法可以调用。
TChart的一些属性实际上是其他类的变量,这些类又具有自己的属性和方法。如Ititles类又具有Text、Color、Font等属性,我们可以用这些属性来设置题头的文本、颜色和字体。
TeeChart和其他的图表控件相比,有一个非常重要的特点是TeeChart可以把图表保存为一个JPEG格式的图形文件。调用格式如下:
TChart.Export.SaveToJPEGFile (FileName,Gray,Performance,Quality,Width,Height)
其中FileName是JPEG文件的保存路径和文件名,路径应该是操作系统中的绝对路径,而不是IIS中的相对路径,IIS对相应的保存目录应该具有写权限。Gray指明是否保存为黑白图像。Performance指明JPEG是生成质量优先还是速度优先。Quality是一个0到100的整数,100时JPEG质量最好,但文件最大;Quality越小则生成的文件越小,但图像质量也随之下降。
为了解决在多用户并发访问Web的情况下,JPEG文件互相覆盖的问题,我们使用了如下所示的一种JPEG文件的命名机制:
OutputJPEGFile =“Chart” & Session.Sessionid &
Replace(Time,“.”,“”) & “.jpg”
在文件名中包括了Sessionid和当前时间,并使用后台进程定期删除过期文件。
应用实例
下面是一个简单的ASP程序,从中可以看到TeeChart在ASP中的使用方法。程序的运行环境为:Windows 2000 Professional、IIS5.0和TeeChart Pro ActiveX 4.0测试版。
<HTML>
<HEAD><TITLE>TeeChart JPEG Chart Demo Page</TITLE></HEAD>
<BODY>
<!--引入TeeChart常数 -->
<!--METADATA NAME=“TeeChart Pro 4.0
ActiveX Control” TYPE=“TypeLib”
UUID=“{008BBE7B-C096-11D0-B4E3-00A0C901D681}”-->
<%
<!--建立ActiveX Object -->
Set TChart1 = CreateObject(“TeeChart.TChart”)
<!--设置高度和宽度 -->
TChart1.Height=250
TChart1.Width=500
<!--设置图表题头 -->
TChart1.Header.Text.Clear
TChart1.Header.Text.Add “K180次旅客列车日发送人数统计图”
<!--设置图形背景 -->
TChart1.Panel.Gradient.Visible=True
TChart1.Panel.Gradient.StartColor=RGB(200,255,200)
TChart1.Panel.Gradient.EndColor=RGB(255,255,255)
<!--添加一个序列 -->
TChart1.AddSeries(scBar)
TChart1.Series(0).Clear
TChart1.Series(0).ColorEachPoint = True
TChart1.Series(0).Add 180, “02/10”,clTeeColor
TChart1.Series(0).Add 240, “02/11”,clTeeColor
TChart1.Series(0).Add 210, “02/12”,clTeeColor
TChart1.Series(0).Add 280, “02/13”,clTeeColor
TChart1.Series(0).Add 218, “02/14”,clTeeColor
TChart1.Series(0).Add 225, “02/15”,clTeeColor
<!--保存为JPEG文件 -->
TChart1.Export.SaveToJPEGFile server.mappath(“/teechart”)+“\MyChart.jpg”,False,JPEGBestQuality, 85,TChart1.Width, TChart1.Height
%>
<img src=“MyChart.jpg”></BODY></HTML>