ASP.NET Web Pages - Chart Helper

Chart - یکی از بسیاری از ASP.NET Web Helperها.

Chart Helper

در فصل قبلی، شما یاد گرفتید که چگونه از یک ASP.NET Helper استفاده کنید.

شما یاد گرفتید که چگونه از Chart Helper در یک شبکه (grid) داده‌ها را نمایش دهید.

این فصل درباره نحوه نمایش داده‌ها در نمودارها با استفاده از 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 پارامتر تعریف می‌کند که ارزش‌های محور x را مشخص کند.

yValues پارامتر تعریف می‌کند که ارزش‌های محور y را مشخص کند.

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

اجرای مثال