圖片幫助器 - 眾多有用的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();}}
【相關推薦】
#2.分享ASP.NET學習筆記(1)--WebPages Razor
3.分享ASP.NET學習筆記(2)--WebPages 介紹
#6.分享ASP.NET學習筆記(5)全域頁面AppStart和PageStart
7.分享ASP.NET學習筆記(8)WebPages 幫助器
#以上是分享ASP.NET學習筆記(9)WebPages圖表的詳細內容。更多資訊請關注PHP中文網其他相關文章!