最新的Web开发教程
 

ASP.NET网页 - 图表助手


图表助手 - 一个很多有用的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();}
}
运行示例»