ASP.NET 网页 - 图表助手
图表助手 - 众多有用的 ASP.NET 网页助手之一。
图表助手
在前面的章节中，你学习了如何使用 ASP.NET "助手"。
你学习了如何使用 "WebGrid 助手" 在网格中显示数据。
本章介绍如何使用 "图表助手" 以图形方式显示数据。
"图表助手" 可以创建不同类型的图表图像，并具有许多格式选项和标签。它可以创建标准图表，如面积图、条形图、柱状图、折线图和饼图，以及更专业的图表，如股票图。
你可以在图表中显示的数据可以来自数组、数据库或文件中的数据。
来自数组的图表
下面的示例显示了从值数组中显示图表的代码。
示例
@{
var myChart = new Chart(width: 600, height: 400)
.AddTitle("员工")
.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("产品销售")
.DataBindTable(dataSource: dbdata, xField: "Name")
.Write();
}
运行示例 »
- var db = Database.Open 打开数据库（并将数据库对象分配给变量 db）
- 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("产品销售")
.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("每位员工的销售额")
.AddSeries("Default", chartType: "Pie",
xValue: dataView, xField: "Name",
yValues: dataView, yFields: "Sales")
.Write();}
}
运行示例 »
图表对象参考
| 助手 | 描述 |
|---|---|
| Chart(width, height [, template] [, templatePath]) | 初始化图表。 |
| Chart.AddLegend([title] [, name]) | 向图表添加图例。 |
| Chart.AddSeries([name] [, chartType] [, chartArea] [, axisLabel] [, legend] [, markerStep] [, xValue] [, xField] [, yValues] [, yFields] [, options]) |
向图表添加一系列值。 |
