ASP.NET Web Pages - Chart Helper

Chart - یکی از مفیدترین ASP.NET Web Helperها است.

Chart Helper

در فصل قبلی، شما یاد گرفتید که چگونه از یک 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 پایگاه داده را باز می‌کند (و نمونه پایگاه داده را به متغیر db نسبت می‌دهد).

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();}
}

مثال چلانا