ASP.NET Web Pages - Chart 幫助器

Chart - 眾多有用的 ASP.NET Web 幫助器之一。

Chart Helper

在前一章，您已經學到了如何使用一個 ASP.NET “幫助器”。

您已學到如何使用 “WebGrid 幫助器”在網格中顯示數據。

本章講解如何在圖表中顯示數據，通過使用 “Chart 幫助器”。

“Chart 幫助器”能夠通過多種格式和標記創建不同類型的圖表圖片。它能夠創建標準圖表，比如面積圖、條狀圖、柱形圖、線圖和餅圖，以及更專業的圖表（比如股票走勢圖）。

顯示在圖表中的數據可以是來自數組、數據庫或文件中的數據。

來自數組的圖表

下例展示的代碼使用來自數組的數據顯示圖表：

實例

@{ 
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();}
}

運行實例