ตัวช่วยแผนภูมิ - หนึ่งในหลายผู้ช่วยเว็บ 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 สร้างวัตถุแผนภูมิใหม่และกำหนดความกว้างและความสูงของมัน
- The AddTitle วิธีการระบุชื่อแผนภูมิ
- The AddSeries วิธีการเพิ่มข้อมูลไปยังแผนภูมิ
- The chartType พารามิเตอร์กำหนดประเภทของแผนภูมิ
- The xValue พารามิเตอร์กำหนดชื่อแกน x
- The yValues พารามิเตอร์กำหนดค่าแกน y
- The 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 สร้างแผนภูมิวัตถุใหม่และกำหนดความกว้างและความสูงของมัน
- The AddTitle วิธีการระบุชื่อแผนภูมิ
- The DataBindTable วิธีการผูกแหล่งข้อมูลแผนภูมิ
- The 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();}
} ตัวอย่างเช่นเรียกใช้»