分享ASP.NET學習筆記（9）WebPages圖表

圖片幫助器 - 眾多有用的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();
}

 新圖建立一個新的圖表物件並且設定它的寬度和高度

- 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中

- 新圖建立一個新的圖表物件並且設定它的寬度與高度

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

【相關推薦】

1. ASP.NET免費影片教學

#2. 分享ASP.NET學習筆記（1）--WebPages Razor

3. 分享ASP.NET學習筆記（2）--WebPages 介紹

4. 分享ASP.NET學習筆記（3）WebPages 佈局

5. 分享ASP.NET學習筆記（4）資料夾

#6. 分享ASP.NET學習筆記（5）全域頁面AppStart和PageStart

7. 分享ASP.NET學習筆記（8）WebPages 幫助器

#

以上是分享ASP.NET學習筆記（9）WebPages圖表的詳細內容。更多資訊請關注PHP中文網其他相關文章！