เนื่องจากเวอร์ชัน TeeChart VCL มีการใช้กันอย่างแพร่หลายในสภาพแวดล้อมการพัฒนาที่หลากหลาย และได้รับการยอมรับเป็นอย่างดี บริษัท Steema Software SL ของสเปนจึงได้พัฒนา TeeChart Pro ActiveX ในเดือนตุลาคม พ.ศ. 2540 ถือเป็นข่าวดีอย่างไม่ต้องสงสัยสำหรับโมเดลการพัฒนา B/S เนื่องจากจำเป็นต้องติดตั้งบนฝั่งเซิร์ฟเวอร์เท่านั้น ไคลเอ็นต์จึงไม่จำเป็นต้องติดตั้งซอฟต์แวร์อื่น ๆ จึงสามารถแสดงได้โดยใช้เบราว์เซอร์ทั่วไป เปิดตัวก็ได้รับความนิยมอย่างล้นหลามอีกครั้ง
ต่อไป เราจะแนะนำคุณสมบัติทั่วไปและแอปพลิเคชันของส่วนประกอบ TeeChart Pro V5 ActiveX ที่ใช้เทคโนโลยี ASP
ก่อนอื่น มาดูตัวอย่างแผนภูมิแท่งสองมิติโดยใช้ส่วนประกอบ TeeChart เพื่อแสดง "ยอดขายรายไตรมาส":
<HTML><BODY>
<%'-------TeeChartEg.asp--- - --------------------
ตั้งค่า TChart1 = CreateObject("TeeChart.TChart")
TChart1.Header.Text(0)="สถิติยอดขายรายไตรมาส"
TChart1.AddSeries( 1)
TChart1.Aspect.View3D=0
TChart1.Series(0).ล้าง
TChart1.Series(0).เพิ่ม 180, "1 ควอเตอร์",RGB(35,70,128)
TChart1.Series(0).เพิ่ม 240, "2 Quarter",RGB(255,80,128)
TChart1.Series(0).เพิ่ม 210, "3 Quarter",&HFACE87
TChart1.Series(0).เพิ่ม 280, "4 Quarter",16777215
TChart1.Export.SaveToJPEGFile server.mappath( "MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height
Set TChart1 = none
%>
<img src="MyChart.jpg">
</BODY></HTML>
1) เหมือนกับ ASP อื่นๆ ส่วนประกอบ วิธีการใช้งานเหมือนกัน ให้สร้างอ็อบเจ็กต์ก่อน
ตั้งค่า TChart1 = CreateObject("TeeChart.TChart")
2) ใช้คุณสมบัติเพื่อแสดงกราฟสถิติคงที่
TChart1.Header.Text(0)="สถิติยอดขายรายไตรมาส"
...
TChart1.Series(0).Add 210, "ไตรมาสที่ 3",&HFACE87
TChart1.Series(0).เพิ่ม 280, "ไตรมาสที่ 4",16777215
3 ) สร้างไฟล์กราฟิกเชิงสถิติ
TChart1.Export.SaveToJPEGFile server.mappath("MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height
4) ปล่อยอ็อบเจ็กต์
ตั้ง TChart1 = ไม่มี
คุณลักษณะมากมายของคลาสอ็อบเจ็กต์ใน ตัวอย่างข้างต้น ทั้งหมดนี้เป็นค่าเริ่มต้น และเราสามารถเพิ่มการตั้งค่าตามสถานการณ์เฉพาะได้ ต่อไปนี้เป็นการแนะนำโดยละเอียดเกี่ยวกับคุณสมบัติทั่วไปอื่นๆ ของส่วนประกอบ 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 "Quarterly Sales Statistics" 'Chart title, method can also be in the form of TChart1.Header.Text(0)="title"
TChart1.Header.Font.Size = 22 'Title Font size
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 จะแสดงความหนาของ Abscissa
TChart1.Walls.Bottom.Color = RGB(35,70,128) ' Base color
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 Quarter",RGB(35,70,128) ' เพิ่มข้อมูลที่แสดงลงในแผนภูมิแบบคงที่ พารามิเตอร์เป็นค่าตัวเลข ตามลำดับ ,ชื่อ,สี'TChart1.Series
(0).Add 240, "2 Quarter",255
'TChart1.Series(0).Add 210, "3 Quarter",&HFACE87
TChart1.Series(0).Add 280 , "4 Quarter",16777215
TChart1.Axis.Depth.Visibl e= False ' เมื่อแกนพิกัดเป็นแบบโปร่งใส 3 มิติ ไม่ว่าจะแสดงผนังด้านในหรือไม่
TChart1.Axis.DrawAxesBeforeSeries = False ' ว่าตารางจะแสดงอยู่ด้านหน้ากราฟหรือไม่
TChart1.Axis.Left.Title.Caption = "มูลค่าเอาต์พุต (หน่วย: 10,000 หยวน)" ' ชื่อแกนแนวตั้ง
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 ' ไม่ว่าแกนพารามิเตอร์ abscissa จะแสดง
TChart1.Axis.Bottom.Title.Caption = "Time Axis" ' ไม่ว่าจะเป็นชื่อแกน abscissa
TChart1.Axis.Bottom.Title.Font.Bold = True ' ไม่ว่าชื่อแกนของ Abscissa จะเป็นตัวหนาหรือไม่
TChart1.Axis .Bottom.Title.Font.Size= 9 'ขนาดชื่อแกน Abscissa
TChart1.Axis.Bottom.Labels.Angle = 0 'มุมเอียงแบบอักษร Abscissa 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 'ส่งออกที่เก็บข้อมูล
ตั้งค่า TChart1 = none
%>
สำหรับไฟล์ MyChart.jpg <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)="ปริมาณการขายรายไตรมาส"'Title
TChart1.AddSeries(1)
TChart1.AddSeries(1)
TChart1.Series(0).Add 180 , "ไตรมาส 1",RGB(255,255,255)
TChart1.Series(1).เพิ่ม 240, "ไตรมาส 1",255
TChart1.Series(0).เพิ่ม 280, "ไตรมาส 2",RGB(255,255,255)
TChart1.Series(1) ).เพิ่ม 200, "ไตรมาสที่ 2",255
TChart1.Series(0).เพิ่ม 150, "ไตรมาสที่ 3",RGB(255,255,255)
TChart1.Series(1).เพิ่ม 320, "ไตรมาสที่ 3",255
TChart1.Series( 0).Add 360, "4 Quarters",RGB(255,255,255)
TChart1.Series(1).Add 200, "4 Quarters",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 = none
%>
สองตัวอย่างข้างต้นสร้างผลลัพธ์ทางสถิติแบบคงที่ จากนั้นจึงแสดงผลลัพธ์เหล่านั้น อย่างไรก็ตาม ในการทำงานจริง การแสดงข้อมูลทางสถิติแบบไดนามิกมากขึ้นจะถูกอ่านจากฐานข้อมูลที่มีอยู่ ด้านล่างนี้เราจะยกตัวอย่างการใช้ ADO เพื่อเชื่อมต่อโดยตรงกับฐานข้อมูล Access และแสดงผลลัพธ์แบบไดนามิก ฐานข้อมูลคือ (test.mdb) และทั้งสองคอลัมน์ของตารางคือ colname และ colvalue คือชื่อเดือนและชื่อคอลข้อมูลทางสถิติที่สอดคล้องกัน (มกราคม, กุมภาพันธ์,...), ค่าคอล (103, 210,...):
<%Dim OutputStream
Set TChart1 = CreateObject("TeeChart.TChart")
TChart1.Header Text(0)="Quarterly Sales Volume"'Title
TChart1.AddSeries(0)'ค่าสไตล์ของกราฟิกที่แสดงคือ 1~39 ดูด้านล่าง
ตั้งค่า Conn=Server.CreateObject("ADODB.Connection")
ตั้งค่า Rst= Server.CreateObject( "ADODB.Recordset")
Conn.Open "driver={microsoft access driver (*.mdb)};dbq="&server.mappath("zcw.mdb")
strsql = "select * from test"
Rst. เปิด strsql,conn ,1,1
IF rst.RecordCount > 0 จากนั้น
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 = ไม่มี
Rst.Close
Set Conn = none
%> <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