ASP.NET Web Pages - Chart 帮助器

chart helper

在前一章，您已经学到了如何使用一个 asp.net “帮助器”。

您已学到如何使用 “webgrid 帮助器”在网格中显示数据。

本章讲解如何在图表中显示数据，通过使用 “chart 帮助器”。

“chart 帮助器”能够通过多种格式和标记创建不同类型的图表图片。它能够创建标准图表，比如面积图、条状图、柱形图、线图和饼图，以及更专业的图表（比如股票走势图）。

显示在图表中的数据可以是来自数组、或文件中的数据。

来自数组的图表

下例展示的代码使用来自数组的数据显示图表：

实例

@{ 
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 打开数据库（并把数据库对象赋给变量 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("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();}
}

运行实例