หน้าเว็บ ASP.NET - ตัวช่วยแผนภูมิ
Chart Helper - หนึ่งในผู้ช่วยเว็บ ASP.NET ที่มีประโยชน์มากมาย
ตัวช่วยแผนภูมิ
ในบทที่แล้ว คุณได้เรียนรู้วิธีใช้ ASP.NET "Helper"
คุณได้เรียนรู้วิธีแสดงข้อมูลในกริดโดยใช้ "WebGrid 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();
}
- แผนภูมิใหม่สร้างวัตถุแผนภูมิใหม่และกำหนดความกว้างและความสูง
- วิธี AddTitleระบุชื่อแผนภูมิ
- วิธี AddSeriesเพิ่มข้อมูลลงในแผนภูมิ
- พารามิเตอร์ chartTypeกำหนดประเภทของแผนภูมิ
- พารามิเตอร์ xValueกำหนดชื่อแกน x
- พารามิเตอร์ yValuesกำหนดค่าแกน y
- วิธีเขียน ()แสดงแผนภูมิ
แผนภูมิจากฐานข้อมูล
คุณสามารถเรียกใช้แบบสอบถามฐานข้อมูลแล้วใช้ข้อมูลจากผลลัพธ์เพื่อสร้างแผนภูมิ:
ตัวอย่าง
@{
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 = ฐานข้อมูลเปิดเปิดฐานข้อมูล (และกำหนดวัตถุฐานข้อมูลให้กับตัวแปร db)
- var dbdata = db.Queryเรียกใช้แบบสอบถามฐานข้อมูลและเก็บผลลัพธ์ใน dbdata
- แผนภูมิใหม่สร้างแผนภูมิวัตถุใหม่และกำหนดความกว้างและความสูง
- วิธี AddTitleระบุชื่อแผนภูมิ
- วิธี DataBindTableผูกแหล่งข้อมูลกับแผนภูมิ
- วิธีเขียน ()แสดงแผนภูมิ
อีกทางเลือกหนึ่งในการใช้วิธี 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();}
}
การอ้างอิงวัตถุแผนภูมิ
| Helper | Description |
|---|---|
| Chart(width, height [, template] [, templatePath]) | Initializes a chart. |
| Chart.AddLegend([title] [, name]) | Adds a legend to a chart. |
| Chart.AddSeries([name] [, chartType]
[, chartArea] [, axisLabel] [, legend] [, markerStep] [, xValue] [, xField] [, yValues] [, yFields] [, options]) |
Adds a series of values to the chart. |