圖表助手 - 一個很多有用的ASP.NET Web助手的。
圖表助手
在前面的章節中,你學會了如何使用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參數定義圖表的類型
-所述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打開數據庫(和數據庫對象分配給變量分貝)
- 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();}
}
運行示例»