ASP.NET Web Pages - Chart Helper

Chart - หนึ่งในหลาย Web Helper ที่มีประโยชน์ของ ASP.NET

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 ตัวแปล chartType กำหนดชนิดกราฟ

xValue ตัวแปล xValue กำหนดค่าของตัวแปล x

yValues ตัวแปล 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 มีความยืดหยาที่มากกว่า เพราะมันสามารถกำหนดเฉพาะตัวแปลและข้อมูลของกราฟได้เกินความสามารถของ DataBindTable：

ตัวอย่าง

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

ปฏิบัติตัวอย่าง