浅谈TeeChart组件在ASP中的应用

由于TeeChart VCL 版本广泛应用于多种开发环境并得到很好的认可,西班牙Steema Software SL公司于1997年10月又开发了TeeChart Pro ActiveX。对于B/S的开发模式无疑是一个好消息,由于它只需安装在服务器端,客户端无需安装其他软件,只要使用通用浏览器即可显示统计图形,因此一面市更是又一次得到极大的欢迎。

下面我们结合ASP技术介绍一下TeeChart Pro V5 ActiveX组件常用属性及应用。

我们先来看一个以TeeChart组件来显示"季度销售量"情况的二维柱状图实例:

1<html><body>

’-----------TeeChartEg.asp------------------------

Set TChart1 = CreateObject("TeeChart.TChart")

TChart1.Header.Text(0)="季度销售量统计"

TChart1.AddSeries(1)

TChart1.Aspect.View3D=0

TChart1.Series(0).Clear

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

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

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

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

TChart1.Export.SaveToJPEGFile server.mappath("http://www.knowsky.com/MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height

Set TChart1 = nothing

1
2<img src="http://www.knowsky.com/MyChart.jpg"/>
3</body></html>

1)同ASP其他组件的使用方法相同,首先创建对象。

Set TChart1 = CreateObject("TeeChart.TChart")

2)利用其属性显示一个静态的统计图形。

TChart1.Header.Text(0)="季度销售量统计"

……

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

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

3)生成统计图形文件

TChart1.Export.SaveToJPEGFile server.mappath("http://www.knowsky.com/MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height

4)释放对象

Set TChart1 = nothing

上例中对象类的很多属性都是默认值,我们可以根据具体情况进行添加设置。下面详细介绍一下TeeChart组件的其他常用属性(采用程序注释的形式列出)

1<html> <head><title>TeeChart对象的属性方法介绍</title></head>
2<body>

Set TChart1 = CreateObject("TeeChart.TChart")

TChart1.Height = 440 ' 整个图表的高度

TChart1.Width = 500 ' 整个图表的宽度

'TChart1.Header.Text.Clear

'TChart1.Header.Text.Add "季度销售量统计" ' 图表标题,方式也可采用 TChart1.Header.Text(0)="标题"形式

TChart1.Header.Font.Size = 22 ' 标题字体大小

TChart1.Header.Font.Bold = True ' 标题字体是否粗体

TChart1.Header.Font.Italic = True ' 标题字体是否斜体

TChart1.Panel.MarginLeft = 3 ' 图表左边距

TChart1.Panel.Gradient.Visible = True ' 是否有底色

TChart1.Panel.Gradient.StartColor = &amp;HB3DEF ' 图表底色开始颜色

TChart1.Panel.Gradient.EndColor = &amp;HFACE87 ' 图表底色结束颜色

TChart1.Panel.BevelWidth = 0 ' 画布向内缩进幅度

TChart1.AddSeries(0) ' 显示图形的方式,取值范围为1 ~ 39

TChart1.Aspect.View3D = False ' False表示2D图形,True表示3D图形

TChart1.Aspect.Chart3DPercent = 10 ' 若是3D图形,表示其倾斜度

TChart1.Aspect.Zoom = 100 ' 图形显示比例

TChart1.Aspect.Orthogonal = TRUE ' 3D图表是否侧转

TChart1.Aspect.Rotation = -20 ' 如果图表是侧转的,水平侧转角度-360~360

TChart1.Aspect.Elevation = 0 ' 如果图表是侧转的,前后侧转角度-360~360

TChart1.Aspect.Perspective = 0 ' 3D图形向心聚集程度

TChart1.Aspect.Chart3DPercent = 20 ' 3D图形厚度1~100

TChart1.Walls.Bottom.Size = 5 ' 如果是3D图形,表示其横坐标厚度

TChart1.Walls.Bottom.Color = RGB(35,70,128) ' 底座颜色

TChart1.Walls.Bottom.Transparent = True ' 若是3D图形,底座是否透明 TChart1.Walls.Back.Pen.Visible = True ' 参坐标边框是否显示

TChart1.Walls.Left.Size = 5 ' 如果是3D图形,表示其纵坐标厚度

TChart1.Walls.Left.Color = 8454143 ' 纵坐标颜色

TChart1.Walls.Left.Transparent = True ' 若是3D图形,纵坐标壁是否透明

TChart1.Legend.Visible = True ' 是否显示图例

TChart1.Legend.VertSpacing = 9 ' 图例框架高度

TChart1.Legend.DividingLines.Visible = False ' 图例间是否有间隔线

'TChart1.Series(0).Clear

'TChart1.Series(0).ColorEachPoint = True

'TChart1.Series(0).Add 180,"1季度",RGB(35,70,128) ' 静态向图表中添加显示数据,参数依次为数值大小,名称,颜色

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

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

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

TChart1.Axis.Depth.Visibl e= False ' 坐标轴是3D透明时,是否显示内壁

TChart1.Axis.DrawAxesBeforeSeries = False ' 网格是否显示在图的前

TChart1.Axis.Left.Title.Caption = "产值(单位:万元)" ' 纵坐标轴标题

TChart1.Axis.Left.Title.Font.Bold = True ' 纵坐标轴标题是否加粗

TChart1.Axis.Left.Title.Font.Size = 9 ' 纵坐标轴标题大小

TChart1.Axis.Left.Title.Visible = True ' 是否显示纵坐标名称

TChart1.Axis.Left.Labels.Angle = 90 ' 纵坐标字体倾斜角度

TChart1.Axis.Left.GridPen.Visible = True ' 横坐标参量轴是否显示

TChart1.Axis.Bottom.Title.Caption = "时间轴" ' 横坐标轴标题

TChart1.Axis.Bottom.Title.Font.Bold = True ' 横坐标轴标题是否加粗

TChart1.Axis.Bottom.Title.Font.Size= 9 ' 横坐标轴标题大小

TChart1.Axis.Bottom.Labels.Angle = 0 ' 横坐标字体倾斜角度0~360

TChart1.Axis.Bottom.GridPen.Visible = True ' 参纵坐标轴是否显示

TChart1.Footer.Text.Add "图表下标题" ' 图表的下标题

TChart1.Footer.Font.Size = 11 ' 下标题字体大小

TChart1.Footer.Font.Bold = True ' 下标题字体是否为粗体

TChart1.Footer.Font.Italic = False ' 下标题字体是否为斜体

TChart1.Export.SaveToJPEGFile server.mappath("http://www.knowsky.com/MyChart.jpg"),False,JPEGBestQuality, 100 , TChart1.Width , TChart1.Height '导出存储为http://www.knowsky.com/MyChart.jpg文件

Set TChart1 = nothing

1</body></html>

注:1. TChart1.AddSeries(0)图形显示方式的属性值得研究,有兴趣的读者可以从0~39测试一下,找到自己理想的显示方式。

2.对于颜色的引用,采用RGB三种表示方法,例如:RGB(255,255,255) = &HFFFFFF = 16777215。具体的换算方法不在说明。

3.属性为True和False的可以用1和0替代表示。

对于组图的添加,下面列举一个显示二组数据的例子。

 1Set TChart1 = CreateObject("TeeChart.TChart") 
 2
 3TChart1.Header.Text(0)="季度销售量"'标题 
 4
 5TChart1.AddSeries(1) 
 6
 7TChart1.AddSeries(1) 
 8
 9TChart1.Series(0).Add 180, "1季度",RGB(255,255,255) 
10
11TChart1.Series(1).Add 240, "1季度",255 
12
13TChart1.Series(0).Add 280, "2季度",RGB(255,255,255) 
14
15TChart1.Series(1).Add 200, "2季度",255 
16
17TChart1.Series(0).Add 150, "3季度",RGB(255,255,255) 
18
19TChart1.Series(1).Add 320, "3季度",255 
20
21TChart1.Series(0).Add 360, "4季度",RGB(255,255,255) 
22
23TChart1.Series(1).Add 200, "4季度",255 
24
25TChart1.Series(0).Marks.Visible = True ' 是否显示数据标题 
26
27TChart1.Series(0).Marks.Style = 0 ' 数据显示风格0~9,0为数值,1为百分比…… 
28
29TChart1.Series(1).Marks.Style=0 
30
31TChart1.Export.SaveToJPEGFile server.mappath("http://www.knowsky.com/MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height 
32
33Set TChart1 = nothing 

以上两个例子都是静态的产生统计结果,然后显示。然而在实际工作中,更多的是从现有的数据库中读取动态的统计数据显示。下面我们举一个利用ADO直接连接Access数据库,动态显示结果的例子。数据库为(test.mdb),表的两列为colname,colvalue。分别为月份名称和对应的统计数据colname(1月份,2月份,……),colvalue(103,210,……):

 1Dim OutputStream 
 2
 3Set TChart1 = CreateObject("TeeChart.TChart") 
 4
 5TChart1.Header.Text(0)="季度销售量"'标题 
 6
 7TChart1.AddSeries(0)'显示图形的风格数值为1 ~39见下 
 8
 9Set Conn=Server.CreateObject("ADODB.Connection") 
10
11Set Rst=Server.CreateObject("ADODB.Recordset") 
12
13Conn.Open "driver={microsoft access driver (*.mdb)};dbq="&server.mappath("zcw.mdb") 
14
15strsql = "select * from test" 
16
17Rst.Open strsql,conn,1,1 
18
19IF rst.RecordCount > 0 THEN 
20
21TChart1.Series(0).Datasource = rst 
22
23TChart1.Series(0).LabelsSource="colname" 
24
25TChart1.Series(0).YValues.ValueSource="colvalue" 
26
27ELSE 
28
29TChart1.Series(0).Fillsamplevalues(12) 
30
31TChart1.Header.Text(0)="没有结果,随机显示数据" 
32
33END IF 
34
35TChart1.Series(0).Marks.Visible=True 
36
37TChart1.Series(0).Marks.Style=4 
38
39TChart1.Export.SaveToJPEGFile server.mappath("http://www.knowsky.com/MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height 
40
41Set TChart1 = nothing 
42
43Rst.Close 
44
45Set Conn = nothing 
1<img src="http://www.knowsky.com/MyChart.jpg"/>

以上的三个实例都是生成静态JPG图片文件后显示的,如果对于浏览结果没有保存价值,我们可以使用PNG(Portable Network Graphics)方式显示。

 1 Dim ChartType, OutputStream, ViewType 
 2
 3Set Chart1 = CreateObject("TeeChart.TChart") 
 4
 5Chart1.AddSeries(0) 
 6
 7Chart1.Series(0).FillSampleValues 20 ' 随机生成数据 
 8
 9OutputStream=Chart1.Export.asPNG.SaveToStream 
10
11Set Chart1=Nothing 
12
13Response.Binarywrite OutputStream 

以上是对TeeChart组件属性与ASP技术结合的简单介绍,希望对大家有所帮助。Teechart Pro ActiveX免费试用版本可从 http://www.steema.com/download/Downloadindex.htm 下载。关于TeeChart与Asp结合的代码示例可参阅 http://www.steema.com/products/teechart/asp/ASPHome.htm

Published At
Categories with Web编程
Tagged with
comments powered by Disqus