ASP.NET 网页图表

ASP.NET 网页图表

? 上一节下一节 ?

Chart - 众多有用的 ASP.NET Web 助手之一。

图表助手

在前一章，您已经学到了如何使用一个 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 更易使用asp数据库，但是 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();}

}

运行实例 ?

Chart 对象参考手册助手描述

Chart(width, height [, template] [, templatePath])

初始化图表。

Chart.AddLegend([title] [, name])

向图表添加图例。

Chart.AddSeries([name] [, chartType] [, chartArea]

[, axisLabel] [, legend] [, markerStep] [, xValue]

[, xField] [, yValues] [, yFields] [, options])

向图表添加一系列值。

? 上一节下一节 ?

（编辑：财气旺网 - 财气网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!