ASP.NET Web Pages - Chart 帮助器

Posted 2021-12-02 blogweb

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

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();}
}

运行实例