浅谈TeeChart组件在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


%>


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