由於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 servermap. "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.StartColor = &HB3DEF ' 是否有底色TChart1.Panel.Gradient.StartColor = &HB3DEF ' 是否有底色TChart1.Panel.Gradient.StartColor = &HB3DEF ' 是否有底色TChart1.Panel.Gradient.StartColor = &HB3DEF ' 是否有底色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 ' 圖形顯示比例
TCOrhart1.Aspect.Ortho = 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
.= "產值(單位:萬元)" ' 縱座標軸標題
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 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 ' 參縱座標字體傾斜角度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為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
%="Myg Set TChart1
= nothing Rst.Close Set Conn = nothing %=".jpg">
以上的三個實例都是產生靜態JPG圖片檔案後顯示的,如果對於瀏覽結果沒有儲存價值,我們可以使用PNG(Portable Network Graphics)方式顯示。
<% Dim ChartType, OutputStream, ViewType
Set Chart1 = CreateObject("TeeChart.TChart")
Chart1.AddSeries(
0)
Chart1.Series(0).FillSampleValues 20 ' 隨機產生資料
來源
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 。