نظرًا لاستخدام إصدار TeeChart VCL على نطاق واسع في مجموعة متنوعة من بيئات التطوير ومعترف به جيدًا، قامت شركة Steema Software SL الإسبانية بتطوير TeeChart Pro ActiveX في أكتوبر 1997. إنها بلا شك أخبار جيدة لنموذج تطوير 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، "ربع واحد"،RGB(35,70,128)
TChart1.Series(0).إضافة 240، "2 ربع"،RGB(255,80,128)
TChart1.Series(0).إضافة 210، "3 أرباع"،&HFACE87
TChart1.Series(0).إضافة 280، "4 أرباع"،16777215
TChart1.Export.SaveToJPEGFile server.mappath( "MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height
Set TChart1 = لا شيء
%>
<img src="MyChart.jpg">
</BODY></HTML>
1) مثل ASP الأخرى المكونات طريقة الاستخدام هي نفسها، قم أولاً بإنشاء الكائن.
Set TChart1 = CreateObject("TeeChart.TChart")
2) استخدم خصائصه لعرض رسم بياني إحصائي ثابت.
TChart1.Header.Text(0)="إحصاءات المبيعات الربع سنوية"
...
TChart1.Series(0).إضافة 210، "الربع الثالث"،&HFACE87
TChart1.Series(0).إضافة 280، "الربع الرابع"،16777215
3 ) إنشاء ملف رسومات إحصائية
TChart1.Export.SaveToJPEGFile server.mappath("MyChart.jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height
4) حرر الكائن
Set 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 "إحصاءات المبيعات الربع سنوية" 'عنوان المخطط، يمكن أن تكون الطريقة أيضًا على شكل TChart1.Header.Text(0)="title"
TChart1.Header.Font.Size = 22 'حجم خط العنوان
TChart1. Header.Font.Bold = True 'ما إذا كان خط العنوان غامق
TChart1 .Header.Font.Italic = True ' ما إذا كان خط العنوان مائل
TChart1.Panel.MarginLeft = 3 ' الهامش الأيسر للمخطط
TChart1.Panel.Gradient.Visible = صحيح ' ما إذا كان هناك لون خلفية
TChart1.Panel.Gradient.StartColor = &HB3DEF ' لون بداية الجزء السفلي من المخطط
TChart1.Panel.Gradient.EndColor = &HFACE87 ' لون نهاية لون خلفية المخطط
TChart1.Panel.BevelWidth = 0 ' عرض المسافة البادئة للقماش
TChart1.AddSeries(0) ' طريقة عرض الرسومات، نطاق القيمة هو 1 ~ 39
TChart1.Aspect.View3D = False ' False يمثل رسومات ثنائية الأبعاد، True يمثل رسومات ثلاثية الأبعاد
TChart1.Aspect.Chart3DPercent = 10 ' إذا كان عبارة عن رسومات ثلاثية الأبعاد، فهي تمثل ميلها
TChart1.Aspect.Zoom = 100 ' نسبة عرض الرسوم
TChart1.Aspect.Orthogonal = TRUE 'ما إذا تم تدوير المخطط ثلاثي الأبعاد بشكل جانبي
TChart1.Aspect.Rotation = -20 'إذا تم تدوير المخطط جانبيًا ، زاوية الدوران الأفقية هي -360~360
TChart1.Aspect.Elevation = 0 'إذا تم تدوير المخطط جانبيًا، قم بتدوير الزاوية الأمامية والخلفية -360~360
TChart1.Aspect.Perspective = 0 ' درجة تجميع الجاذبية المركزية للرسومات ثلاثية الأبعاد
TChart1.Aspect .Chart3DPercent = 20 ' سمك الرسومات ثلاثية الأبعاد 1~100
TChart1.Walls.Bottom.Size = 5 ' إذا كان رسمًا ثلاثي الأبعاد، فإنه يشير إلى سمك Abscissa الخاص به
TChart1.Walls.Bottom.Color = RGB(35,70,128) ' اللون الأساسي
TChart1.Walls.Bottom.Transparent = True ' إذا كان رسمًا ثلاثي الأبعاد، سواء كانت القاعدة شفافة TChart1.Walls.Back.Pen.Visible = True ' المعلمة ما إذا كان يتم عرض حدود الإحداثيات
TChart1.Walls.Left.Size = 5 ' إذا كان رسمًا ثلاثي الأبعاد، فإنه يشير إلى سمكه الإحداثي
TChart1.Walls.Left.Color = 8454143 ' اللون الإحداثي
TChart1.Walls.Left.Transparent = True ' إذا كان رسمًا ثلاثي الأبعاد، فما إذا كان الجدار الإحداثي شفافًا
TChart1 .Legend.Visible = True ' ما إذا كان سيتم عرض وسيلة الإيضاح
TChart1.Legend.VertSpacing = 9 ' ارتفاع إطار وسيلة الإيضاح
TChart1.Legend.DividingLines.Visible = False ' ما إذا كان هناك أسطر تباعد بين وسائل الإيضاح
'TChart1.Series(0 ) .مسح
'TChart1.Series(0).ColorEachPoint = True
'TChart1.Series(0).Add 180,"1 Quarter",RGB(35,70,128) ' إضافة بيانات العرض بشكل ثابت إلى المخطط، المعلمات هي قيم رقمية بالترتيب، الاسم، اللون'TChart1.Series
(0). أضف 240، "2 Quarter"، 255
'TChart1.Series(0). أضف 210، "3 Quarter"، & HFACE87
TChart1.Series(0). أضف 280 ، "4 أرباع"، 16777215
TChart1.Axis.Depth.Visibl e= False ' عندما يكون محور الإحداثيات شفافًا ثلاثي الأبعاد، ما إذا كان سيتم عرض الجدار الداخلي
TChart1.Axis.DrawAxesBeforeSeries = False ' ما إذا كان سيتم عرض الشبكة أمام الرسم البياني
TChart1.Axis.Left.Title.Caption = "قيمة الإخراج (الوحدة: 10000 يوان)" ' عنوان المحور العمودي
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 'زاوية إمالة الخط 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 = لا شيء
%>
لملف 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).إضافة 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، "الربع الثاني"،255
TChart1.Series(0).إضافة 150، "الربع الثالث"،RGB(255,255,255)
TChart1.Series(1).إضافة 320، "الربع الثالث"،255
TChart1.Series( 0).أضف 360، "4 أرباع"،RGB(255,255,255)
TChart1.Series(1).أضف 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. Mappath("MyChart .jpg"),False,JPEGBestQuality,100,TChart1.Width, TChart1.Height
Set TChart1 = لا شيء
%>
يقوم المثالان أعلاه بإنشاء نتائج إحصائية بشكل ثابت ثم عرضها. ومع ذلك، في العمل الفعلي، تتم قراءة عرض البيانات الإحصائية الأكثر ديناميكية من قاعدة البيانات الموجودة. نقدم أدناه مثالاً على استخدام ADO للاتصال مباشرة بقاعدة بيانات Access وعرض النتائج ديناميكيًا. قاعدة البيانات هي (test.mdb)، وعمودي الجدول هما colname وcolvalue. وهي اسم الشهر والاسم العمودي للبيانات الإحصائية المقابلة (يناير، فبراير،...)، القيمة colvalue (103، 210،...):
<%Dim OutputStream
Set TChart1 = CreateObject("TeeChart.TChart")
TChart1.Header Text(0)="حجم المبيعات الربع سنوية"'Title
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. افتح 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 = لا شيء
%> <img src="MyChart .jpg">
يتم عرض الأمثلة الثلاثة المذكورة أعلاه بعد إنشاء ملفات صور JPG ثابتة. إذا لم تكن هناك قيمة في حفظ نتائج التصفح، فيمكننا استخدام PNG (رسومات الشبكة المحمولة) لعرضها.
<% Dim ChartType, OutputStream, ViewType
Set Chart1 = CreateObject("TeeChart.TChart")
Chart1.AddSeries(0)
Chart1.Series(0).FillSampleValues 20 ' إنشاء البيانات بشكل عشوائي
OutputStream=Chart1.Export.asPNG.SaveToStream
Set Chart1= لا شيء
Response.Binarywrite OutputStream
%>
ما سبق هو مقدمة مختصرة عن مجموعة سمات مكونات TeeChart وتقنية ASP، وآمل أن تكون مفيدة للجميع. يمكن تنزيل نسخة تجريبية مجانية من Teechart Pro ActiveX من http://www.steema.com/download/Downloadindex.htm . للحصول على أمثلة التعليمات البرمجية لدمج TeeChart مع Asp، يرجى الرجوع إلى http://www.steema.com/products/teecart/asp/ASPHome.htm .