ASP.NET Web Pages - Chart Helper
- หน้าก่อนหน้า WebGrid ng WebPages
- หน้าต่อไป Email ng WebPages
Chart - isa sa maraming kapaki-pakinabang na ASP.NET Web helper.
Chart Helper
Sa nakaraang kabanata, natutuhan mo na kung paano gamitin ang isang ASP.NET "helper".
Natutunan mo na kung paano ipakita ang datos sa grid sa pamamagitan ng paggamit ng "WebGrid Helper".
Ang kabanatang ito ay nagtuturo kung paano ipakita ang datos sa grapik sa pamamagitan ng paggamit ng "Chart Helper".
"Chart Helper" ay makakapagbuo ng iba't ibang uri ng larawan ng grapik sa pamamagitan ng iba't ibang format at tag. Makakapagbuo ito ng mga standar na grapik, tulad ng area chart, bar chart, column chart, line chart at pie chart, at mas propesyonal na grapik (tulad ng stock price chart).
Ang datos na ipapakita sa grapik ay maaaring mula sa array, database o file.
Grapik mula sa array
Ang sumusunod na halimbawa ng kodigo ay nagpapakita ng paggamit ng datos mula sa array upang ipakita ang grapik:
ตัวอย่าง
@{
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 Tumuklas ng bagong objekto ng grapik at itakda ang lapad at taas nito.
AddTitle Ang paraan ay nagtutukoy ng pamagat ng grapik.
AddSeries Ang paraan ay nagdagdag ng data sa grapik.
chartType Ang mga parameter ay nagtutukoy ng uri ng grapik.
xValue Ang mga parameter ay nagtutukoy ng halaga ng x-axis.
yValues Ang mga parameter ay nagtutukoy ng halaga ng y-axis.
Write() Ang paraan ay nagpapakita ng grapik.
Grapik mula sa database
Maaari mong magpalakad ng isang pagsusuri ng database muna, at gamitin ang resulta ng datos upang gumawa ng grapik:
ตัวอย่าง
@{
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 Buksan ang database (at inilagay ang objekto ng database sa variable na db).
var dbdata = db.Query Paggamit ng pagsusuri ng database at inilagay ang resulta sa dbdata.
new Chart Tumuklas ng bagong objekto ng grapik at itakda ang lapad at taas nito.
AddTitle Ang paraan ay nagtutukoy ng pamagat ng grapik.
DataBindTable Ang paraan ay nagbibind ng pinagmulan ng data sa grapik.
Write() Ang paraan ay nagpapakita ng grapik.
Ang kahalili ng paggamit ng DataBindTable ay ang paggamit ng AddSeries (tingnan ang nakaraang halimbawa). Mas madali ang paggamit ng DataBindTable, ngunit ang AddSeries ay mas mabisa sa pag-angkla, dahil makakapag-angkin ito ng mas tiyak na pagtutukoy ng grapik at data:
ตัวอย่าง
@{
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();}
}
ปฏิบัติตัวอย่าง
- หน้าก่อนหน้า WebGrid ng WebPages
- หน้าต่อไป Email ng WebPages
