ASP.NET 網頁 - 圖表助手
圖表助手 - 眾多有用的 ASP.NET Web 助手之一。
圖表助手
在之前的章節中，您已經學會了如何使用 ASP.NET 的“助手”。
您學會了如何使用“WebGrid 助手”在網格中顯示資料。
本章將解釋如何使用“圖表助手”以圖形形式顯示資料。
“圖表助手”可以建立各種型別的圖表影像，並帶有許多格式選項和標籤。它可以建立標準的圖表，如面積圖、條形圖、柱狀圖、折線圖和餅圖，以及更專業的圖表，如股票圖。
您可以在圖表中顯示的資料可以來自陣列、資料庫或檔案中的資料。
來自陣列的圖表
下面的示例顯示了顯示陣列值圖表所需的程式碼
示例
@{
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();}
}
執行示例 »
圖表物件參考
| 輔助 | 描述 |
|---|---|
| Chart(width, height [, template] [, templatePath]) | 初始化圖表。 |
| Chart.AddLegend([title] [, name]) | 向圖表新增圖例。 |
| Chart.AddSeries([name] [, chartType] [, chartArea] [, axisLabel] [, legend] [, markerStep] [, xValue] [, xField] [, yValues] [, yFields] [, options]) |
向圖表新增一組值。 |
