图表助手 - 一个很多有用的ASP.NET Web助手的。
图表助手
在前面的章节中,你学会了如何使用ASP.NET "Helper" 。
你学会了如何显示使用在网格数据"WebGrid Helper" 。
本章说明如何使用来显示以图形的形式数据, "Chart Helper" 。
在"Chart Helper"可以创建图表的图像不同类型的许多格式选项和标签。 它可以创建等标准图表面积图,条形图,柱形图,折线图和饼图,提供更专业化的图表,例如股票走势图一起。
你在图表中显示的数据可以是从阵列中,从数据库中,或从文件中的数据。
图从一个数组
下面的例子示出了从值的阵列显示的图表所需的代码:
例
@{
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打开数据库(和数据库对象分配给变量分贝)
- 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();}
}
运行示例»