浅谈TEECHART组件在ASP中的应用
类别: ASP教程 
由于TeeChart VCL 版本广泛应用于多种开发环境并得到很好的认可，西班牙Steema Software SL公司于1997年10月又开发了TeeChart Pro ActiveX。对于B/S的开发模式无疑是一个好消息，由于它只需安装在服务器端，客户端无需安装其他软件，只要使用通用浏览器即可显示统计图形，因此一面市更是又一次得到极大的欢迎。
下面我们结合ASP技术介绍一下TeeChart Pro V5 ActiveX组件常用属性及应用。
我们先来看一个以TeeChart组件来显示"季度销售量"情况的二维柱状图实例：
<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季度",&HFACE87
TChart1.Series(0).Add 280, "4季度",16777215
TChart1.Export.SaveToJPEGFile server.mappath("MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height
Set TChart1 = nothing
%>
<img src="MyChart.jpg">
</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("MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height
4）释放对象
Set TChart1 = nothing
上例中对象类的很多属性都是默认值，我们可以根据具体情况进行添加设置。下面详细介绍一下TeeChart组件的其他常用属性（采用程序注释的形式列出）
<HTML> <HEAD><TITLE>TeeChart对象的属性方法介绍</TITLE></HEAD>
<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 = &HB3DEF \' 图表底色开始颜色
TChart1.Panel.Gradient.EndColor = &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季度",&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("MyChart.jpg"),False,JPEGBestQuality, 100 , TChart1.Width , TChart1.Height \'导出存储为MyChart.jpg文件
Set TChart1 = nothing
%> <img src="MyChart.jpg">
</BODY></HTML>
注：1. TChart1.AddSeries(0)图形显示方式的属性值得研究，有兴趣的读者可以从0~39测试一下，找到自己理想的显示方式。
2.对于颜色的引用，采用RGB三种表示方法，例如：RGB(255,255,255) = &HFFFFFF = 16777215。具体的换算方法不在说明。
3.属性为True和False的可以用1和0替代表示。
对于组图的添加，下面列举一个显示二组数据的例子。
<%Set TChart1 = CreateObject("TeeChart.TChart")
TChart1.Header.Text(0)="季度销售量"\'标题
TChart1.AddSeries(1)
TChart1.AddSeries(1)
TChart1.Series(0).Add 180, "1季度",RGB(255,255,255)
TChart1.Series(1).Add 240, "1季度",255
TChart1.Series(0).Add 280, "2季度",RGB(255,255,255)
TChart1.Series(1).Add 200, "2季度",255
TChart1.Series(0).Add 150, "3季度",RGB(255,255,255)
TChart1.Series(1).Add 320, "3季度",255
TChart1.Series(0).Add 360, "4季度",RGB(255,255,255)
TChart1.Series(1).Add 200, "4季度",255
TChart1.Series(0).Marks.Visible = True \' 是否显示数据标题
TChart1.Series(0).Marks.Style = 0 \' 数据显示风格0~9，0为数值，1为百分比……
TChart1.Series(1).Marks.Style=0
TChart1.Export.SaveToJPEGFile server.mappath("MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height
Set TChart1 = nothing
%>
以上两个例子都是静态的产生统计结果，然后显示。然而在实际工作中，更多的是从现有的数据库中读取动态的统计数据显示。下面我们举一个利用ADO直接连接Access数据库，动态显示结果的例子。数据库为（test.mdb），表的两列为colname，colvalue。分别为月份名称和对应的统计数据colname（1月份，2月份，……），colvalue（103，210，……）：
<%Dim OutputStream
Set TChart1 = CreateObject("TeeChart.TChart")
TChart1.Header.Text(0)="季度销售量"\'标题
TChart1.AddSeries(0)\'显示图形的风格数值为1 ~39见下
Set Conn=Server.CreateObject("ADODB.Connection")
Set Rst=Server.CreateObject("ADODB.Recordset")
Conn.Open "driver={microsoft access driver (*.mdb)};dbq="&server.mappath("zcw.mdb")
strsql = "select * from test"
Rst.Open strsql,conn,1,1
IF rst.RecordCount > 0 THEN
TChart1.Series(0).Datasource = rst
TChart1.Series(0).LabelsSource="colname"
TChart1.Series(0).YValues.ValueSource="colvalue"
ELSE
TChart1.Series(0).Fillsamplevalues(12)
TChart1.Header.Text(0)="没有结果，随机显示数据"
END IF
TChart1.Series(0).Marks.Visible=True
TChart1.Series(0).Marks.Style=4
TChart1.Export.SaveToJPEGFile server.mappath("MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height
Set TChart1 = nothing
Rst.Close
Set Conn = nothing
%> <img src="MyChart.jpg">
以上的三个实例都是生成静态JPG图片文件后显示的，如果对于浏览结果没有保存价值，我们可以使用PNG(Portable Network Graphics)方式显示。
<% Dim ChartType, OutputStream, ViewType
Set Chart1 = CreateObject("TeeChart.TChart")
Chart1.AddSeries(0)
Chart1.Series(0).FillSampleValues 20 \' 随机生成数据
OutputStream=Chart1.Export.asPNG.SaveToStream
Set Chart1=Nothing
Response.Binarywrite OutputStream
%>
下面我们结合ASP技术介绍一下TeeChart Pro V5 ActiveX组件常用属性及应用。
我们先来看一个以TeeChart组件来显示"季度销售量"情况的二维柱状图实例：
<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季度",&HFACE87
TChart1.Series(0).Add 280, "4季度",16777215
TChart1.Export.SaveToJPEGFile server.mappath("MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height
Set TChart1 = nothing
%>
<img src="MyChart.jpg">
</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("MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height
4）释放对象
Set TChart1 = nothing
上例中对象类的很多属性都是默认值，我们可以根据具体情况进行添加设置。下面详细介绍一下TeeChart组件的其他常用属性（采用程序注释的形式列出）
<HTML> <HEAD><TITLE>TeeChart对象的属性方法介绍</TITLE></HEAD>
<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 = &HB3DEF \' 图表底色开始颜色
TChart1.Panel.Gradient.EndColor = &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季度",&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("MyChart.jpg"),False,JPEGBestQuality, 100 , TChart1.Width , TChart1.Height \'导出存储为MyChart.jpg文件
Set TChart1 = nothing
%> <img src="MyChart.jpg">
</BODY></HTML>
注：1. TChart1.AddSeries(0)图形显示方式的属性值得研究，有兴趣的读者可以从0~39测试一下，找到自己理想的显示方式。
2.对于颜色的引用，采用RGB三种表示方法，例如：RGB(255,255,255) = &HFFFFFF = 16777215。具体的换算方法不在说明。
3.属性为True和False的可以用1和0替代表示。
对于组图的添加，下面列举一个显示二组数据的例子。
<%Set TChart1 = CreateObject("TeeChart.TChart")
TChart1.Header.Text(0)="季度销售量"\'标题
TChart1.AddSeries(1)
TChart1.AddSeries(1)
TChart1.Series(0).Add 180, "1季度",RGB(255,255,255)
TChart1.Series(1).Add 240, "1季度",255
TChart1.Series(0).Add 280, "2季度",RGB(255,255,255)
TChart1.Series(1).Add 200, "2季度",255
TChart1.Series(0).Add 150, "3季度",RGB(255,255,255)
TChart1.Series(1).Add 320, "3季度",255
TChart1.Series(0).Add 360, "4季度",RGB(255,255,255)
TChart1.Series(1).Add 200, "4季度",255
TChart1.Series(0).Marks.Visible = True \' 是否显示数据标题
TChart1.Series(0).Marks.Style = 0 \' 数据显示风格0~9，0为数值，1为百分比……
TChart1.Series(1).Marks.Style=0
TChart1.Export.SaveToJPEGFile server.mappath("MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height
Set TChart1 = nothing
%>
以上两个例子都是静态的产生统计结果，然后显示。然而在实际工作中，更多的是从现有的数据库中读取动态的统计数据显示。下面我们举一个利用ADO直接连接Access数据库，动态显示结果的例子。数据库为（test.mdb），表的两列为colname，colvalue。分别为月份名称和对应的统计数据colname（1月份，2月份，……），colvalue（103，210，……）：
<%Dim OutputStream
Set TChart1 = CreateObject("TeeChart.TChart")
TChart1.Header.Text(0)="季度销售量"\'标题
TChart1.AddSeries(0)\'显示图形的风格数值为1 ~39见下
Set Conn=Server.CreateObject("ADODB.Connection")
Set Rst=Server.CreateObject("ADODB.Recordset")
Conn.Open "driver={microsoft access driver (*.mdb)};dbq="&server.mappath("zcw.mdb")
strsql = "select * from test"
Rst.Open strsql,conn,1,1
IF rst.RecordCount > 0 THEN
TChart1.Series(0).Datasource = rst
TChart1.Series(0).LabelsSource="colname"
TChart1.Series(0).YValues.ValueSource="colvalue"
ELSE
TChart1.Series(0).Fillsamplevalues(12)
TChart1.Header.Text(0)="没有结果，随机显示数据"
END IF
TChart1.Series(0).Marks.Visible=True
TChart1.Series(0).Marks.Style=4
TChart1.Export.SaveToJPEGFile server.mappath("MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height
Set TChart1 = nothing
Rst.Close
Set Conn = nothing
%> <img src="MyChart.jpg">
以上的三个实例都是生成静态JPG图片文件后显示的，如果对于浏览结果没有保存价值，我们可以使用PNG(Portable Network Graphics)方式显示。
<% Dim ChartType, OutputStream, ViewType
Set Chart1 = CreateObject("TeeChart.TChart")
Chart1.AddSeries(0)
Chart1.Series(0).FillSampleValues 20 \' 随机生成数据
OutputStream=Chart1.Export.asPNG.SaveToStream
Set Chart1=Nothing
Response.Binarywrite OutputStream
%>
- 上一篇: 如何使用FSO搜索硬盘文件
- 下一篇: 无组件实现文件上传/下载
