Chart - 眾多有用的 ASP.NET Web 幫助器之一。
在前一章,您已經(jīng)學(xué)到了如何使用一個(gè) ASP.NET “幫助器”。
您已學(xué)到如何使用 “WebGrid 幫助器”在網(wǎng)格中顯示數(shù)據(jù)。
本章講解如何在圖表中顯示數(shù)據(jù),通過使用 “Chart 幫助器”。
“Chart 幫助器”能夠通過多種格式和標(biāo)記創(chuàng)建不同類型的圖表圖片。它能夠創(chuàng)建標(biāo)準(zhǔn)圖表,比如面積圖、條狀圖、柱形圖、線圖和餅圖,以及更專業(yè)的圖表(比如股票走勢圖)。
顯示在圖表中的數(shù)據(jù)可以是來自數(shù)組、數(shù)據(jù)庫或文件中的數(shù)據(jù)。
下例展示的代碼使用來自數(shù)組的數(shù)據(jù)顯示圖表:
@{ 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(); }
運(yùn)行實(shí)例
new Chart 創(chuàng)建新的圖表對象,并設(shè)置其寬度和高度。
AddTitle 方法規(guī)定圖表的標(biāo)題。
AddSeries 方法向圖表添加數(shù)據(jù)。
chartType 參數(shù)定義圖表的類型。
xValue 參數(shù)定義 x 軸的值。
yValues 參數(shù)定義 y 軸的值。
Write() 方法顯示圖表。
您可以首先運(yùn)行一次數(shù)據(jù)庫查詢,然后使用結(jié)果中的數(shù)據(jù)來創(chuàng)建圖表:
@{ 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(); }
運(yùn)行實(shí)例
var db = Database.Open 打開數(shù)據(jù)庫(并把數(shù)據(jù)庫對象賦給變量 db)。
var dbdata = db.Query 運(yùn)行數(shù)據(jù)庫查詢,并把結(jié)果保存到 dbdata 中。
new Chart 創(chuàng)建新的圖表對象,并設(shè)置其寬度和高度。
AddTitle 方法規(guī)定圖表的標(biāo)題。
DataBindTable 方法將數(shù)據(jù)源綁定到圖表。
Write() 方法顯示圖表。
使用 DataBindTable 方法的替代方案是使用 AddSeries(參見前一個(gè)例子)。DataBindTable 更易使用,但是 AddSeries 的伸縮性更強(qiáng),因?yàn)樗軌蚋_地規(guī)定圖表和數(shù)據(jù):
@{ 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(); }
運(yùn)行實(shí)例
生成圖表的第三個(gè)選項(xiàng)是使用 XML 文件作為圖表的數(shù)據(jù):
@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();} }
![]() | ![]() .. 定價(jià):¥45 優(yōu)惠價(jià):¥42 更多書籍 |
![]() | ![]() .. 定價(jià):¥225 優(yōu)惠價(jià):¥213 更多書籍 |