ASP.NET WP - 图表

在本章中，我们将介绍图表助手以及如何在图表上显示数据.在上一章中，我们在WebGrid帮助器上显示了数据. 图表助手可用于以图形格式显示数据.

• 图表帮助程序可以呈现显示各种图表类型数据的图像.

• 它还可以支持不同的格式和标签选项.

• 它能够呈现您在Microsoft Office中可能看到的30多种类型的图表，例如面积图，条形图柱形图， 等.

• 图表显示数据和其他元素，如图例，轴，系列等.

• 您在图表中显示的数据可以来自数组，数据库返回的结果，也可以来自XML文件中的数据.

如何在图表上显示数据？

让我们看一个简单的示例，我们将在其中显示数据在图表上.首先我们需要创建一个新的CSHTML文件.

在名称字段中输入 Charts.cshtml ，然后单击"确定"，然后在Charts.cshtml文件中替换以下代码.

@{
   var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Student Marks (%)")
   .AddSeries(
      name: "Student",
      xValue: new[] { "Allan", "Mark", "Ali", "Kerry", "Steve" },
      yValues: new[] { "79", "53", "73", "81", "43" })
   .Write();
}

正如您在上面的代码中所看到的那样，首先它将创建一个新图表并设置其宽度和高度.

var myChart = new Chart(width: 600, height: 400)

您可以使用 AddTitle 方法指定图表标题，如以下代码所示.

.AddTitle("Student Marks (%)")

AddSeries 方法可用于添加数据，然后将值分配给xValue，以及yValues AddSeries方法的参数. name参数显示在图表图例中.

.AddSeries(
   name: "Student",
   xValue: new[] { "Allan", "Mark", "Ali", "Kerry", "Steve" },
   yValues: new[] { "79", "53", "73", "81", "43" })

xValue参数包含将沿图表的水平轴显示的数据数组，而yValues参数包含将用于绘制图表垂直点的数据数组.

写入方法实际呈现图表.在这种情况下，因为您没有指定图表类型，图表助手会呈现其默认图表，即柱状图.

现在让我们运行您的应用程序并指定以下网址和减号; http://localhost:36905/charts ，您将看到以下网页.

现在让我们看一下另一个例子，我们将使用数据库查询来检索数据，然后数据将显示在图表上.因此，首先我们需要将另一个Student表添加到我们的数据库中，如以下屏幕截图所示.

现在让我们将一些数据添加到Students表中，如下面的屏幕截图所示.

如您所见，现在我们有学生数据.

现在显示此数据图表，让我们创建一个新的CSHTML文件.

在Name字段中输入 ChartDataUsingDB.cshtml ，然后单击OK，然后替换ChartDataUsingDB.cshtml文件中的所有代码.

@{
   var db = Database.Open("WebPagesCustomers");
   var data = db.Query("SELECT FirstName, Marks FROM Students");
   var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Student Marks")
   .DataBindTable(dataSource: data, xField: "FirstName")
   .Write();
}

正如您在上面的代码中所看到的，首先它会打开 WebPagesCustomers 数据库，然后将其分配给名为db的变量.

var db = Database.Open("WebPagesCustomers");

接下来创建一个简单的SQL查询，它将从Students表中检索FirstName和Marks.

var data = db.Query("SELECT FirstName, Marks FROM Students");

然后创建一个新图表并通过调用图表的 DataBindTable 方法将数据库查询传递给它.

var myChart = new Chart(width: 600, height: 400)
   .AddTitle("Student Marks")
   .DataBindTable(dataSource: data, xField: "FirstName")
   .Write();

此方法需要两个参数

• dataSource 参数用于查询中的数据.

• xField 参数可让您设置哪些数据column用于图表的x轴.

现在让我们运行这个应用程序并指定以下url :   http://localhost:36905/ChartDataUsingDB ，您将看到以下网页.

您可以使用AddSeries方法而不是DataBindTable，还可以在AddSeries方法中指定图表类型参数，如以下代码所示.

@{
   var db = Database.Open("WebPagesCustomers");
   var data = db.Query("SELECT FirstName, Marks FROM Students");
   var myChart = new Chart(width: 600, height: 400)
      .AddTitle("Student Marks")
      .AddSeries("Default", chartType: "Pie",
      xValue: data, xField: "FirstName",
      yValues: data, yFields: "Marks")
      .Write();
}

现在让我们再次运行应用程序并指定以下url :   http://localhost:36905/ChartDataUsingDB ，您将看到以下网页.

您还可以通过在创建图表时指定主题参数来更改图表的主题，如以下代码所述.

var myChart = new Chart(width: 600, height: 400, theme: ChartTheme.Green)

现在让我们再次运行此应用程序并指定以下url :   http://localhost:36905/ChartDataUsingDB ，您将看到以下网页.