آموزش ASP.Net به زبان ساده > آموزش مدل صفحات وب WP
درس پانزدهم : کار با کمک دهنده رسم نمودار Chart Helper در صفحات وب ASP.Net در ASP.Net
Web Pages
مقدمه :
در درس های قبلی با نحوه کار با کمک دهنده های ASP.Net از جمله کمک دهنده
های جدول وار اطلاعات و یا
کمک دهنده ارسال ایمیل آشنا شدید .
در این درس قصد داریم تا شما را با کمک دهنده رسم نمودار یا Chart Helper آشنا کنیم
. از این کمک دهنده می توانید برای رسم انواع نمودارهای حطی و گرافیکی جهت نمایش اطلاعات
خود استفاده کنید . این کمک دهنده می تواند انواع نمودارهای تصویری را همراه با قالب
بندی های متفاوت و اضافه کردن متن ( Labels ) ایجاد کند . از جمله نمودارهای قابل تولید
توسط این کمک دهنده می توان به نمودارهای ستونی ، میله ای ، دایره ای ، خطی و ... به
همراه تنظیمات اختصاصی اشاره کرد .
تصویرهای زیر برخی از نمودارهای ایجاد شده توسط کمک دهنده رسم نمودار Chart Helper
را نشان می دهد . اطلاعاتی که برای نمایش در این نمودارها استفاده می کنید ، می تواند
از سوی یک آرایه ، یک پایگاه داده و یا یک فایل داده ای نظیر XML تعیین شود . در ادامه به بررسی حالت های مختلف
کار با این کمک دهنده خواهیم پرداخت .
رسم نمودار بر پایه اطلاعات یک آرایه :
کد زیر نحوه تولید یک نمودار را بر اساس اطلاعات یک شی آرایه ای نشان می دهد . به کد
مثال دقت کنید ، سپس به توضیح هر یک از بخش های کد خواهیم پرداخت :
|
کد
|
@{
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 : در خط اول ، توسط متد ( ) chart ، یک شی جدید از
نوع نمودار را با نام myChart ، با ارتفاع و عرض مشخص ایجاد کرده ایم .
- خاصیت AddTitle : توسط این خاصیت یک عنوان برای نمودار تعیین
شده است .
- متد AddSeries : این متد اطلاعات مورد نظر را به نمودار اضافه
خواهد کرد .
- پارامتر ChartType : تعیین کننده نوع نمودار بوده که در اینجا
ستونی تعیین شده است .
- پارامتر : xVAlue : این پارامتر مقادیر و نام های موجود در
ردیف افقی نمودار ( محور x ) را تعیین می کند ، که در این مثال نام اشخاص است .
- پارامتر yValue : این پارامتر مقادیر ستون ها یا ردیف های عمودی
( محور y ) را تعیین می کند که در این مثال اعداد مربوط به هر شخص است .
- متد ( ) Write : در نهایت نیز متد ( ) Write باعث رسم نمودار
و تولید خروجی آن بر روی صفحه می شود .
همانطور که در خروجی نمودار مشاهده می کنید ، این نمودار اطلاعات آماری مربوط به چند
شخص را به صورت ستونی نمایش می دهد .
نمایش اطلاعات یک پایگاه داده توسط نمودار در صفحات وب ASP.Net :
شما می توانید به یک پایگاه داده مورد نظر متصل شده ، اطلاعات دلخواه را از آن استخراج
نموده و سپس اطلاعات را در قالب یک نمودار نمایش دهید .
کد زیر نحوه انجام این کار را نشان می دهد . به کد دقت کرده و سپس به تشریح نکات آن
خواهیم پرداخت :
|
کد
|
@{
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 : این متد پایگاه داده که نام آن
در پرانتز مقابلش تعیین شده را باز کرده و اطلاعات آن را در متغیر db قرار می دهد .
- ( ) var dbdata = db.QueryString : این کد یک دستور Select
برای انتخاب داده که در پرانتز جلوب آن تعیین می شود ، را اجرا کرده و سپس نتایج
حاصله را در متغیر dbdata ذخیره می کند .
- ( ) new chart : همانند مثال قبل ، توسط این متد یک نمودار
جدید به نام myChart را ایجاد کرده و طول و عرض آن را مشخص می کنیم .
- AddTitle : این خاصیت عنوان یا هدر نمودار را تعیین می کند
.
- متد ( ) DataBindTable : این متد متغیر داده ای را به نمودار
متصل کرده و اطلاعات را درون آن قرار می دهد .
- متد ( )Write : در نهایت نیز متد ( )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 توسط نمودار در ASP.Net :
گزینه دیگر نمایش اطلاعات یک فایل
XML توسط نمودار در صفحات وب ASP.Net است . برای این منظور بایستی ابتدا به
فایل 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();
}
}
|
|
کد
|
|
توضیح کد مثال :
در خط اول کد ، یک متغیر داده ای از نوع DataSet تعریف کرده ایم که در خط بعدی توسط
متد ReadXmlSchema قالب مورد نظر برای دسته بندی اطلاعات فایل XML را می خواند .
در خط سوم نیز متغیر dataset توسط متد ReadXML خود فایل XML را خوانده و اطلاعات آن
را ذخیره می کند .
در خط چهارم نیز یک شی dataView ایجاد کرده ایم که اطلاعات اولین جدول از اطلاعات شی
DataSet را می خواند .
سپس توسط متد ( ) Chart و تعیین خواص و پارامترهای مربوطه ، نمودار که از نوع دایره
ای ( pie ) می باشد ، را ایجاد کرده و نمایش داده ایم .
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان گذاشته و در صورت تمایل از Developer1
حمایت نمایید :