مساعد الرسم البياني - واحدة من العديد من المفيد المساعدون الويب ASP.NET.
مساعد الرسم البياني
في الفصول السابقة، تعلمت كيفية استخدام ASP.NET "Helper" .
تعلمت كيفية عرض البيانات في الشبكة باستخدام "WebGrid Helper" .
يشرح هذا الفصل كيفية عرض البيانات في شكل رسوم بيانية، وذلك باستخدام "Chart Helper" .
في "Chart Helper" يمكن أن تخلق الرسم البياني من أنواع مختلفة الصور مع العديد من خيارات التنسيق والعلامات. فإنه يمكن إنشاء المخططات القياسية مثل مخططات المنطقة، شريط الرسوم البيانية والرسوم البيانية العمود، والرسوم البيانية خط، والرسوم البيانية الدائرية، جنبا إلى جنب مع الرسوم البيانية أكثر تخصصا مثل الرسوم البيانية الأوراق المالية.
البيانات التي يتم عرضها في الرسم البياني يمكن أن يكون من بين مجموعة من قاعدة بيانات، أو من البيانات في الملف.
الرسم البياني من صفيف
المثال التالي يوضح رمز المطلوبة لعرض مخطط من مجموعة من القيم:
مثال
@{
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Employees")
.AddSeries(chartType: "column",
xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
yValues: new[] { "2", "6", "4", "5", "3" })
.Write();
} تشغيل المثال » - new Chart بإنشاء كائن مخطط جديد ويحدد العرض والارتفاع
- في AddTitle يحدد طريقة عنوان التخطيط
- في AddSeries طريقة يضيف البيانات إلى الرسم البياني
- و chartType المعلمة تحدد نوع الرسم البياني
- في xValue تحدد المعلمة أسماء محور س
- في yValues تحدد المعلمة القيم المحور الصادي
- في Write() يعرض طريقة الرسم البياني
الرسم البياني من بيانات قاعدة البيانات
يمكنك تشغيل استعلام قاعدة البيانات ومن ثم استخدام البيانات من نتائج لإنشاء تخطيط:
مثال
@{
var db = Database.Open("SmallBakery");
var dbdata = db.Query("SELECT Name, Price FROM Product");
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Product Sales")
.DataBindTable(dataSource: dbdata, xField: "Name")
.Write();
} تشغيل المثال » - var db = Database.Open يفتح قاعدة البيانات (ويعين كائن قاعدة البيانات إلى ديسيبل متغير)
- var dbdata = db.Query تشغيل استعلام قاعدة البيانات ومخازن النتيجة في dbdata
- new Chart بإنشاء كائن جديد الرسم البياني، ويحدد العرض والارتفاع
- في AddTitle يحدد طريقة عنوان التخطيط
- في DataBindTable طريقة يربط مصدر البيانات إلى الرسم البياني
- في Write() يعرض طريقة الرسم البياني
كبديل لاستخدام طريقة DataBindTable هو استخدام AddSeries (انظر المثال السابق). DataBindTable أسهل للاستخدام، ولكن AddSeries أكثر مرونة لأنه يمكنك تحديد الرسم البياني والبيانات بشكل أكثر وضوحا:
مثال
@{
var db = Database.Open("SmallBakery");
var dbdata = db.Query("SELECT Name, Price FROM Product");
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Product Sales")
.AddSeries(chartType:"Pie",
xValue: dbdata, xField: "Name",
yValues: dbdata, yFields: "Price")
.Write();
} تشغيل المثال » الرسم البياني من بيانات XML
الخيار الثالث للرسم هو استخدام ملف XML كبيانات للتخطيط:
مثال
@using System.Data;
@{
var dataSet = new DataSet();
dataSet.ReadXmlSchema(Server.MapPath("data.xsd"));
dataSet.ReadXml(Server.MapPath("data.xml"));
var dataView = new DataView(dataSet.Tables[0]);
var myChart = new Chart(width: 600, height: 400)
.AddTitle("Sales Per Employee")
.AddSeries("Default", chartType: "Pie",
xValue: dataView, xField: "Name",
yValues: dataView, yFields: "Sales")
.Write();}
} تشغيل المثال »