最新的Web開發教程
 

ASP.NET網頁 - 圖表助手


圖表助手 - 一個很多有用的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();}
}
運行示例»