asp.net web pages - chart 幫助器
chart 幫助器 - 眾多有用的 asp.net web 幫助器之一。
chart 幫助器
在前面的章節(jié)中,您已經(jīng)學(xué)習(xí)了如何使用 asp.net 的 "幫助器"。
前面已經(jīng)介紹了如何使用 "webgrid 幫助器" 在網(wǎng)格中顯示數(shù)據(jù)。
本章介紹如何使用 "chart 幫助器" 以圖形化的形式顯示數(shù)據(jù)。
"chart 幫助器" 可以創(chuàng)建不同類型的帶有多種格式化選項和標(biāo)簽的圖表圖像。它可以創(chuàng)建面積圖、條形圖、柱形圖、折線圖、餅圖等標(biāo)準(zhǔn)圖表,也可以創(chuàng)建像股票圖表這樣的更專業(yè)的圖表。
在圖表中顯示的數(shù)據(jù)可以是來自一個數(shù)組,一個數(shù)據(jù)庫,或者一個文件中的數(shù)據(jù)。
根據(jù)數(shù)組創(chuàng)建圖表
下面的實例顯示了根據(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();
}
- new chart 創(chuàng)建一個新的圖表對象并且設(shè)置它的寬度和高度
- addtitle 方法指定了圖表的標(biāo)題
- addseries 方法向圖表中增加數(shù)據(jù)
- charttype 參數(shù)定義圖表的類型
- xvalue 參數(shù)定義 x 軸的名稱
- yvalues 參數(shù)定義 y 軸的名稱
- write() 方法顯示圖表
根據(jù)數(shù)據(jù)庫創(chuàng)建圖表
您可以執(zhí)行一個數(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();
}
- var db = database.open 打開數(shù)據(jù)庫(將數(shù)據(jù)庫對象賦值給變量 db)
- var dbdata = db.query 執(zhí)行數(shù)據(jù)庫查詢并保存結(jié)果在 dbdata 中
- new chart 創(chuàng)建一個新的圖表對象并且設(shè)置它的寬度和高度
- addtitle 方法指定了圖表的標(biāo)題
- databindtable 方法將數(shù)據(jù)源綁定到圖表
- write() 方法顯示圖表
除了使用 databindtable 方法之外,另一種方法是使用 addseries(見前面的實例)。databindtable 更容易使用,但是 addseries 更加靈活,因為您可以更明確地指定圖表和數(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();
}
根據(jù) xml 數(shù)據(jù)創(chuàng)建圖表
第三種創(chuàng)建圖表的方法是使用 xml 文件作為圖表的數(shù)據(jù):
實例
@{
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();}
}
- ASP.NET Web Pages 對象
- ASP.NET Web Pages – 發(fā)布
- ASP.NET MVC 簡介
- ASP.NET MVC Web 應(yīng)用程序
- ASP.NET MVC 參考手冊
- ASP.NET Web 頁面
- ASP.NET CheckBox 控件
- ASP.NET Literal 控件
- ASP.NET RadioButtonList 控件
- WebSecurity InitializeDatabaseConnection 方法
- HTML InputCheckbox
- ASP.NET HTML 控件 Calendar
- ASP.NET HTML 控件 Checkbox
- ASP.NET HTML 控件 DataList
- ASP.NET HTML 控件 Radiobutton
- ASP.NET HTML 控件 RegularExpressionValidator
- ASP.NET HTML 控件 Validationsummary
- ASP.NET HTML 控件 SortedList DropDownList
- C# 實例 可重復(fù)使用的頭部和底部
- C# 實例 If Else 條件