浅谈TeeChart组件在ASP中的应用.docx

浅谈TeeChart组件在ASP中的应用.docx

《浅谈TeeChart组件在ASP中的应用.docx》由会员分享，可在线阅读，更多相关《浅谈TeeChart组件在ASP中的应用.docx（14页珍藏版）》请在冰豆网上搜索。

浅谈TeeChart组件在ASP中的应用

浅谈TeeChart组件在ASP中的应用

     由于TeeChartVCL版本广泛应用于多种开发环境并得到很好的认可，西班牙SteemaSoftwareSL公司于1997年10月又开发了TeeChartProActiveX。

对于B/S的开发模式无疑是一个好消息，由于它只需安装在服务器端，客户端无需安装其他软件，只要使用通用浏览器即可显示统计图形，因此一面市更是又一次得到极大的欢迎。

ASP/ChartTypes.asp?

ChartType=23&View=1">

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

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

<%’-----------TeeChartEg.asp------------------------

      SetTChart1=CreateObject（"TeeChart.TChart"）

      TChart1.Header.Text（0）="季度销售量统计" 

      TChart1.AddSeries

（1）

      TChart1.Aspect.View3D=0

      TChart1.Series（0）.Clear

      TChart1.Series（0）.Add180,"1季度",RGB（35,70,128）

      TChart1.Series（0）.Add240,"2季度",RGB（255,80,128） 

      TChart1.Series（0）.Add210,"3季度",&HFACE87

      TChart1.Series（0）.Add280,"4季度",16777215

      TChart1.EXPort.SaveToJPEGFileserver.mappath（"MyChart.jpg"）,False,JPEGBestQuality,100,TChart1.Width,TChart1.Height

      SetTChart1=nothing

%>

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

      SetTChart1=CreateObject（"TeeChart.TChart"）

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

      TChart1.Header.Text（0）="季度销售量统计" 

             ……

      TChart1.Series（0）.Add210,"3季度",&HFACE87

      TChart1.Series（0）.Add280,"4季度",16777215

3）生成统计图形文件

      TChart1.Export.SaveToJPEGFileserver.mappath（"MyChart.jpg"）,False,JPEGBestQuality,100,TChart1.Width,TChart1.Height

4）释放对象

      SetTChart1=nothing

      上例中对象类的很多属性都是默认值，我们可以根据具体情况进行添加设置。

下面详细介绍一下TeeChart组件的其他常用属性（采用程序注释的形式列出）

<%

      SetTChart1=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）.Add180,"1季度",RGB（35,70,128）'静态向图表中添加显示数据,参数依次为数值大小,名称,颜色

      'TChart1.Series（0）.Add240,"2季度",255 

      'TChart1.Series（0）.Add210,"3季度",&HFACE87

      TChart1.Series（0）.Add280,"4季度",16777215

      TChart1.Axis.Depth.Visible=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文件

      SetTChart1=nothing

%>

注：

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

      2.对于颜色的引用，采用RGB三种表示方法，例如：

RGB（255,255,255）=&HFFFFFF=16777215。

具体的换算方法不在说明。

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

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

<%SetTChart1=CreateObject（"TeeChart.TChart"）

TChart1.Header.Text（0）="季度销售量"'标题

TChart1.AddSeries

（1）

TChart1.AddSeries

（1）

TChart1.Series（0）.Add180,"1季度",RGB（255,255,255）

TChart1.Series

（1）.Add240,"1季度",255 

TChart1.Series（0）.Add280,"2季度",RGB（255,255,255）

TChart1.Series

（1）.Add200,"2季度",255

TChart1.Series（0）.Add150,"3季度",RGB（255,255,255）

TChart1.Series

（1）.Add320,"3季度",255 

TChart1.Series（0）.Add360,"4季度",RGB（255,255,255）

TChart1.Series

（1）.Add200,"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.SaveToJPEGFileserver.mappath（"MyChart.jpg"）,False,JPEGBestQuality,100,TChart1.Width,TChart1.Height

      SetTChart1=nothing

%>

      以上两个例子都是静态的产生统计结果，然后显示。

然而在实际工作中，更多的是从现有的数据库中读取动态的统计数据显示。

下面我们举一个利用ADO直接连接Access数据库，动态显示结果的例子。

数据库为（test.mdb），表的两列为colname，colvalue。

分别为月份名称和对应的统计数据colname（1月份，2月份，……），colvalue（103，210，……）：

<%DimOutputStream

SetTChart1=CreateObject（"TeeChart.TChart"）

TChart1.Header.Text（0）="季度销售量"'标题

TChart1.AddSeries（0）'显示图形的风格数值为1~39见下

SetConn=Server.CreateObject（"ADODB.Connection"）       

SetRst=Server.CreateObject（"ADODB.Recordset"）   

Conn.Open"driver={microsoftaccessdriver（*.mdb）};dbq="&server.mappath（"zcw.mdb"）

strsql="select*fromtest"

Rst.Openstrsql,conn,1,1

IFrst.RecordCount>0THEN

 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）="没有结果，随机显示数据"

ENDIF

TChart1.Series（0）.Marks.Visible=True

TChart1.Series（0）.Marks.Style=4

TChart1.Export.SaveToJPEGFileserver.mappath（"MyChart.jpg"）,False,JPEGBestQuality,100,TChart1.Width,TChart1.Height

SetTChart1=nothing

Rst.Close

SetConn=nothing

%>

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

<%DimChartType,OutputStream,ViewType

 SetChart1=CreateObject（"TeeChart.TChart"）

 Chart1.AddSeries（0）

 Chart1.Series（0）.FillSampleValues20   '随机生成数据

 OutputStream=Chart1.Export.asPNG.SaveToStream

 SetChart1=Nothing

 Response.BinarywriteOutputStream

%>

      以上是对TeeChart组件属性与ASP技术结合的简单介绍，希望对大家有所帮助。

TeechartProActiveX免费试用版本可从

TeeChart控件的应用

北方交通大学殷剑宏

　　设计背景

基于服务器/浏览器架构的解决方案在越来越多的领域得到应用。

使用ASP脚本，我们可以方便地访问各种数据库，生成与用户交互的动态页面。

一般情况下，由浏览器解释要显示的结果，其中统计数据的显示结果一般采用HTML表格形式。

笔者在铁路车站Intranet系统的开发过程中，遇到要把数据库中的统计结果用统计图表（柱状图、折线图、饼图等）方式输出的问题。

因为统计图表在美观和易于理解等方面有着表格所不具备的优越性，所以这个问题具有一定的普遍性。

目前，针对这个问题，主要有3种可行的解决方案：

1．在浏览器端安装使用图表控件如MsChart等。

这样做的缺点是在客户端要安装和注册ActiveX控件，操作较为复杂，并且把客户端系统限制在Windows的范围内。

2．使用JavaApplet显示图形。

这样做开发难度较高，需要针对具体的应用要求编制Java绘图程序。

3．在服务器端使用控件动态生成图形文件（JPEG格式），此方法可以适用于任何流行的客户端浏览器。

本文讨论第3种方案，使用的控件是TeeChartProActiveX4.0版。

TeeChart控件

TeeChartProActiveX是西班牙SteemaSL公司开发的图表类控件，主要用来生成各种复杂的图表。

熟悉Delphi和C＋＋Builder的编程人员对它不会陌生，因为在Delphi和C＋＋Builder里包括了TeeChart的VCL版本。

本文使用的是TeeChartProActiveX4.0，它的测试版可以从网站下载。

TeeChartProActiveX4.0的主要特性如下：

是32位ActiveX控件，可以在VB、Delphi、MSOffice等多种编程环境下使用；

可以直接存取ODBC数据源；

具有11种标准的和9种扩展的Series类型；

提供16种统计函数；

支持2D和3D效果，支持缩放和滚动；

可以将图表输出为Bitmap、Metafile、JPEG或者NativeChart格式；

支持用户绘图和打印；

是集成化的设计工具；

提供例子和在线帮助。

TeeChartProActiveX4.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