使用 ASP.NET 网页 (Razor) 在图表中显示数据

项目
07/13/2023

本文介绍如何使用图表通过帮助程序在 ASP.NET 网页 (Razor) 网站Chart中显示数据。

你将了解的内容：

如何在图表中显示数据。

如何使用内置主题设置图表样式。

如何保存图表以及如何缓存它们以提高性能。

以下是本文中介绍的 ASP.NET 编程功能：

帮助 Chart 程序。

注意

本文中的信息适用于 ASP.NET 网页 1.0 和网页 2。

图表帮助程序

如果要以图形形式显示数据，可以使用 Chart 帮助程序。帮助 Chart 程序可以呈现以各种图表类型显示数据的图像。它支持许多用于格式设置和标记的选项。帮助 Chart 程序可以呈现超过 30 种类型的图表，包括你可能熟悉的 Microsoft Excel 或其他工具（面积图、条形图、柱形图、折线图和饼图）以及更专业的图表（如股票图表）。

面积图	条形图
柱形图	折线图
饼图	股票图表

图表元素

图表显示数据和其他元素，如图例、轴、序列等。下图显示了使用 Chart 帮助程序时可以自定义的许多图表元素。本文介绍如何设置一些 (而不是所有元素) 。

说明：显示图表元素的图片

从数据创建图表

在图表中显示的数据可以来自数组、从数据库返回的结果或 XML 文件中的数据。

使用数组

如使用 Razor 语法 ASP.NET 网页编程简介中所述，使用数组可将类似项的集合存储在单个变量中。可以使用数组来包含要包含在图表中的数据。

此过程演示如何使用默认图表类型根据数组中的数据创建图表。它还演示如何在页面内显示图表。

创建名为 ChartArrayBasic.cshtml 的新文件。
将现有内容替换为以下内容：
```
@{
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Chart Title")
        .AddSeries(
            name: "Employee",
            xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
            yValues: new[] { "2", "6", "4", "5", "3" })
        .Write();
}
```
该代码首先创建一个新图表，并设置其宽度和高度。使用 AddTitle 方法指定图表标题。若要添加数据，请使用 AddSeries 方法。在此示例中，使用方法的 nameAddSeries 、 xValue和 yValues 参数。参数 name 显示在图表图例中。参数 xValue 包含沿图表水平轴显示的数据数组。参数 yValues 包含用于绘制图表垂直点的数据数组。

方法 Write 实际上呈现图表。在这种情况下，由于未指定图表类型， Chart 因此帮助程序会呈现其默认图表，即柱形图。
在浏览器中运行页面。浏览器显示图表。

对图表数据使用数据库查询

如果要绘制图表的信息位于数据库中，则可以运行数据库查询，然后使用结果中的数据创建图表。此过程演示如何读取和显示在 ASP.NET 网页 Sites 中使用数据库简介一文中创建的数据库中的数据。

如果文件夹尚不存在，请将 App_Data 文件夹添加到网站的根目录。
在 App_Data 文件夹中，添加名为 SmallBakery.sdf 的数据库文件，该文件在 ASP.NET 网页站点中使用数据库简介中所述。
创建名为 ChartDataQuery.cshtml 的新文件。
将现有内容替换为以下内容：
```
@{
    var db = Database.Open("SmallBakery");
    var data = db.Query("SELECT Name, Price FROM Product");
    var myChart = new Chart(width: 600, height: 400)
        .AddTitle("Product Sales")
        .DataBindTable(dataSource: data, xField: "Name")
        .Write();
}
```
该代码首先打开 SmallBakery 数据库，并将其分配给名为的 db变量。此变量表示 Database 可用于从数据库读取和写入数据库的对象。接下来，代码运行 SQL 查询以获取每个产品的名称和价格。该代码创建一个新图表，并通过调用图表的方法将数据库查询传递给该图表 DataBindTable 。此方法采用两个参数： dataSource 参数用于查询中的数据，参数 xField 用于设置图表 x 轴使用的数据列。

作为使用方法的 DataBindTable 替代方法，可以使用 AddSeries 帮助程序的方法 Chart 。方法 AddSeries 允许设置 xValue 和 yValues 参数。例如，不要使用 DataBindTable 如下所示的方法：
```
.DataBindTable(data, "Name")
```
可以使用 AddSeries 如下所示的方法：
```
.AddSeries("Default",
    xValue: data, xField: "Name",
    yValues: data, yFields: "Price")
```
两者都呈现相同的结果。方法 AddSeries 更灵活，因为可以更显式地指定图表类型和数据，但如果不需要额外的灵活性， DataBindTable 该方法更易于使用。
在浏览器中运行页面。

使用 XML 数据

图表的第三个选项是使用 XML 文件作为图表的数据。这要求 XML 文件还具有描述 XML 结构的架构文件 (.xsd 文件) 。此过程演示如何从 XML 文件读取数据。

在 App_Data 文件夹中，创建名为 data.xml的新 XML 文件。

将现有 XML 替换为以下内容，这是有关虚构公司中员工的一些 XML 数据。

<?xml version="1.0" standalone="yes" ?>
<NewDataSet xmlns="http://tempuri.org/data.xsd">
    <Employee>
        <Name>Erin</Name>
        <Sales>10440</Sales>
    </Employee>
    <Employee>
        <Name>Kim</Name>
        <Sales>17772</Sales>
    </Employee>
    <Employee>
        <Name>Dean</Name>
        <Sales>23880</Sales>
    </Employee>
    <Employee>
        <Name>David</Name>
        <Sales>7663</Sales>
    </Employee>
    <Employee>
        <Name>Sanjay</Name>
        <Sales>21773</Sales>
    </Employee>
    <Employee>
        <Name>Michelle</Name>
        <Sales>32294</Sales>
    </Employee>
</NewDataSet>

在 App_Data 文件夹中，创建名为 data.xsd 的新 XML 文件。 (请注意，这次的扩展名为 .xsd.)

将现有 XML 替换为以下内容：

<?xml version="1.0" ?>
<xs:schema
    id="NewDataSet"
    targetNamespace="http://tempuri.org/data.xsd"
    xmlns:mstns="http://tempuri.org/data.xsd"
    xmlns="http://tempuri.org/data.xsd"
    xmlns:xs="http://www.w3.org/2001/XMLSchema"
    xmlns:msdata="urn:schemas-microsoft-com:xml-msdata"
    attributeFormDefault="qualified"
    elementFormDefault="qualified">
    <xs:element name="NewDataSet"
        msdata:IsDataSet="true"
        msdata:EnforceConstraints="False">
        <xs:complexType>
            <xs:choice maxOccurs="unbounded">
                <xs:element name="Employee">
                    <xs:complexType>
                        <xs:sequence>
                            <xs:element
                                name="Name"
                                type="xs:string"
                                minOccurs="0" />
                            <xs:element
                                name="Sales"
                                    type="xs:double"
                                    minOccurs="0" />
                        </xs:sequence>
                    </xs:complexType>
                </xs:element>
            </xs:choice>
        </xs:complexType>
    </xs:element>
</xs:schema>

在网站的根目录中，创建名为 ChartDataXML.cshtml 的新文件。
将现有内容替换为以下内容：
```
@using System.Data;
@{
    var dataSet = new DataSet();
    dataSet.ReadXmlSchema(Server.MapPath("~/App_Data/data.xsd"));
    dataSet.ReadXml(Server.MapPath("~/App_Data/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();
}
```
代码首先创建对象 DataSet 。此对象用于管理从 XML 文件读取的数据，并根据架构文件中的信息对其进行组织。 (请注意，代码顶部包含语句 using SystemData。这是为了能够使用对象而 DataSet 必须这样做。有关详细信息，请参阅本文后面的 “使用”语句和完全限定名称。)

接下来，代码基于数据集创建 DataView 对象。数据视图提供图表可以绑定到的对象，即读取和绘制。图表使用 AddSeries 方法绑定到数据，正如前面在绘制数组数据图表时所看到的那样，只是这次 xValue 和 yValues 参数设置为 DataView 对象。

此示例还演示如何指定特定的图表类型。在方法中添加 AddSeries 数据时， chartType 还会将参数设置为显示饼图。
在浏览器中运行页面。

提示

“Using”语句和完全限定名称

使用 Razor 语法 ASP.NET 网页.NET Framework由成千上万个组件组成， (类) 。为了便于管理使用所有这些类，它们被组织到命名空间中，这些 命名空间有点类似于库。例如， System.Web 命名空间包含支持浏览器/服务器通信的类， System.Xml 命名空间包含用于创建和读取 XML 文件的类，命名空间 System.Data 包含可用于处理数据的类。

为了访问.NET Framework中的任何给定类，代码不仅需要知道类名，还需要知道该类的命名空间。例如，若要使用 Chart 帮助程序，代码需要查找 System.Web.Helpers.Chart 类，该类将命名空间 () System.Web.Helpers 与类名 (Chart) 组合在一起。这称为类的完全限定名称，它是在.NET Framework广大范围内的完整、明确的位置。在代码中，如下所示：

var myChart = new System.Web.Helpers.Chart(width: 600, height: 400) // etc.

但是，每次要引用类或帮助程序时，必须使用这些长且完全限定的名称) (且容易出错，这很麻烦。因此，若要更轻松地使用类名，可以导入感兴趣的命名空间，这通常只是.NET Framework中许多命名空间中的少数命名空间。如果已导入命名空间，则只能使用类名 () Chart ，而不是 () System.Web.Helpers.Chart 的完全限定名称。当代码运行并遇到类名时，它只能查看已导入的命名空间来查找该类。

将 ASP.NET 网页与 Razor 语法结合使用来创建网页时，通常每次都使用相同的类集，包括 WebPage 类、各种帮助程序等。为了节省每次创建网站时导入相关命名空间的工作，ASP.NET 配置为自动为每个网站导入一组核心命名空间。因此，到目前为止，你不必处理命名空间或导入;使用的所有类都位于已为你导入的命名空间中。

但是，有时需要使用不在自动导入的命名空间中的类。在这种情况下，可以使用该类的完全限定名称，也可以手动导入包含类的命名空间。若要导入命名空间，请在 Visual Basic) import 中使用 using (语句，如本文前面的示例中所示。

例如， DataSet 类位于命名空间中 System.Data 。命名空间 System.Data 不会自动可用于 ASP.NET Razor 页面。因此，若要 DataSet 使用类的完全限定名称，可以使用如下所示的代码：

var dataSet = new System.Data.DataSet();

如果必须重复使用类， DataSet 可以导入如下所示的命名空间，然后在代码中仅使用类名：

@using System.Data;
@{
    var dataSet = new DataSet();
    // etc.
}

可以为要引用的任何其他.NET Framework命名空间添加using语句。但是，如前所述，不需要经常执行此操作，因为你将使用的大多数类都位于命名空间中，这些命名空间由 ASP.NET 自动导入，以便在 .cshtml 和 .vbhtml 页中使用。

在网页内显示图表

在到目前为止看到的示例中，你创建了一个图表，然后将图表作为图形直接呈现到浏览器。但是，在许多情况下，你希望将图表显示为页面的一部分，而不仅仅是在浏览器中单独显示。为此，需要一个两步过程。第一步是创建生成图表的页面，如你所见。

第二步是在另一页中显示生成的图像。若要显示图像，请使用 HTML <img> 元素，就像显示任何图像一样。但是，元素引用包含Chart创建图表的帮助程序的 .cshtml 文件，<img>而不是引用.jpg或.png文件。当显示页运行时， <img> 元素获取帮助程序输出 Chart 并呈现图表。

网页中显示的图表的屏幕截图。

创建名为 ShowChart.cshtml 的文件。

将现有内容替换为以下内容：

<!DOCTYPE html>
<html>
  <head>
    <title>Chart Example</title>
  </head>
  <body>
    <h1>Chart Example</h1>
    <p>The following chart is generated by the <em>ChartArrayBasic.cshtml</em> file, but is shown
       in this page.</p>
    <p><img src="ChartArrayBasic.cshtml" /> </p>
  </body>
</html>

代码使用 <img> 元素显示之前在 ChartArrayBasic.cshtml 文件中创建的图表。

在浏览器中运行网页。 ShowChart.cshtml 文件根据 ChartArrayBasic.cshtml 文件中包含的代码显示图表图像。

设置图表样式

帮助 Chart 程序支持大量可用于自定义图表外观的选项。可以设置颜色、字体、边框等。自定义图表外观的一种简单方法是使用主题。主题是信息的集合，用于指定如何使用字体、颜色、标签、调色板、边框和效果来呈现图表。 (请注意，图表的样式并不指示 chart 的类型。)

下表列出了内置主题。

主题	说明
`Vanilla`	在白色背景上显示红色列。
`Blue`	在蓝色渐变背景上显示蓝色列。
`Green`	在绿色渐变背景上显示蓝色列。
`Yellow`	在黄色渐变背景上显示橙色列。
`Vanilla3D`	在白色背景上显示三维红色列。

可以指定创建新图表时要使用的主题。

创建名为 ChartStyleGreen.cshtml 的新文件。

将页面中的现有内容替换为以下内容：

@{
    var db = Database.Open("SmallBakery");
    var data = db.Query("SELECT Name, Price FROM Product");
    var myChart = new Chart(width: 600,
                        height: 400,
                        theme: ChartTheme.Green)
        .AddTitle("Product Sales")
        .DataBindTable(data, "Name")
        .Write();
}

此代码与前面使用数据库作为数据的示例相同，但在创建 Chart 对象时会添加 theme 参数。下面显示了更改的代码：

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

在浏览器中运行页面。你会看到与之前相同的数据，但图表看起来更完善：

保存图表

Chart使用本文中到目前为止所见的帮助程序时，每次调用图表时，帮助程序都会从头开始重新创建图表。如有必要，图表的代码还会重新查询数据库或重新读取 XML 文件以获取数据。在某些情况下，执行此操作可能是一个复杂的操作，例如，如果查询的数据库很大，或者 XML 文件包含大量数据。即使图表不涉及大量数据，动态创建图像的过程也会占用服务器资源，如果许多人请求显示图表的页面，可能会影响网站的性能。

为了帮助你减少创建图表的潜在性能影响，可以在第一次需要时创建图表，然后保存它。当再次需要图表时，你只需提取保存的版本并呈现它，而不是重新生成它。

可以通过以下方式保存图表：

将图表缓存在服务器) 上的计算机内存中 (。
将图表另存为图像文件。
将图表另存为 XML 文件。此选项允许在保存图表之前对其进行修改。

缓存图表

创建图表后，可以缓存它。缓存图表意味着，如果需要再次显示图表，则无需重新创建图表。在缓存中保存图表时，可以为其指定一个必须对该图表唯一的键。

如果服务器内存不足，可能会删除保存到缓存的图表。此外，如果应用程序因任何原因重启，缓存将被清除。因此，使用缓存图表的标准方法是始终先检查缓存中是否可用，如果没有，则创建或重新创建它。

在网站的根目录中，创建名为 ShowCachedChart.cshtml 的文件。
将现有内容替换为以下内容：
```
<!DOCTYPE html>
<html>
    <head>
        <title>Chart Example</title>
    </head>
<body>
    <h1>Chart Example</h1>
    <img src="ChartSaveToCache.cshtml?key=myChartKey" />
    <p><a href="ClearCache.cshtml">Clear cache</a></p>
</body>
</html>
```
标记 <img> 包含指向 srcChartSaveToCache.cshtml 文件的属性，并将键作为查询字符串传递到页面。键包含值“myChartKey”。 ChartSaveToCache.cshtml 文件包含Chart创建图表的帮助程序。稍后将创建此页面。

页面末尾有一个名为 ClearCache.cshtml 的页面的链接。这是一个页面，你很快就会创建。仅需要 ClearCache.cshtml 来测试此示例的缓存，它不是使用缓存图表时通常包含的链接或页面。
在网站的根目录中，创建名为 ChartSaveToCache.cshtml 的新文件。
将现有内容替换为以下内容：
```
@{
    var chartKey = Request["key"];
    if (chartKey != null) {
        var cachedChart = Chart.GetFromCache(key: chartKey);
        if (cachedChart == null) {
            cachedChart = new Chart(600, 400);
            cachedChart.AddTitle("Cached Chart -- Cached at " + DateTime.Now);
            cachedChart.AddSeries(
               name: "Employee",
               axisLabel: "Name",
               xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
               yValues: new[] { "2", "6", "4", "5", "3" });
            cachedChart.SaveToCache(key: chartKey,
               minutesToCache: 2,
               slidingExpiration: false);
        }
        Chart.WriteFromCache(chartKey);
    }
}
```
代码首先检查是否已将任何内容作为查询字符串中的键值传递。如果是这样，代码会尝试通过调用 GetFromCache 方法并向其传递密钥来读取缓存中的图表。如果发现该键下的缓存中没有任何内容 (在首次请求图表) 时会发生，则代码将像往常一样创建图表。图表完成后，代码通过调用 SaveToCache将其保存到缓存中。该方法需要一个键 (，以便以后可以请求图表) ，以及图表应在缓存中保存的时间量。 (缓存图表的确切时间取决于你认为图表所代表的数据可能会更改的频率。) 方法 SaveToCache 还需要参数 slidingExpiration - 如果设置为 true，则每次访问图表时都会重置超时计数器。在这种情况下，它实际上意味着图表的缓存条目在上次访问图表的 2 分钟后过期。 (滑动过期的替代方法是绝对过期，这意味着缓存条目在放入缓存后 2 分钟就会过期，无论访问频率如何。)

最后，代码使用 WriteFromCache 方法从缓存中提取和呈现图表。请注意，此方法位于检查缓存的块之外 if ，因为它将从缓存中获取图表，无论图表是从缓存开始还是必须生成并保存在缓存中。

请注意，在示例中， AddTitle 方法包含时间戳。 (它将当前日期和时间 - DateTime.Now 添加到 title.)
创建名为 ClearCache.cshtml 的新页面，并将其内容替换为以下内容：
```
@{
    WebCache.Remove("myChartKey");
}
<!DOCTYPE html>
<html lang="en">
  <body>
    <p>Cache has been cleared.</p>
    <p>Return to <a href="ShowCachedChart.cshtml">ShowCachedChart.cshtml</a></p>
  </body>
</html>
```
此页面使用 WebCache 帮助程序删除 ChartSaveToCache.cshtml 中缓存的图表。如前所述，通常不必有这样的页面。在此处创建它只是为了更轻松地测试缓存。
在浏览器中运行 ShowCachedChart.cshtml 网页。该页基于 ChartSaveToCache.cshtml 文件中包含的代码显示图表图像。记下时间戳在图表标题中的内容。
关闭浏览器。
再次运行 ShowCachedChart.cshtml 。请注意，时间戳与之前相同，这表示图表未重新生成，而是从缓存中读取的。
在 ShowCachedChart.cshtml 中，单击“ 清除缓存 ”链接。这会转到 ClearCache.cshtml，它报告缓存已被清除。
单击“ 返回到 ShowCachedChart.cshtml” 链接，或从 WebMatrix 重新运行 ShowCachedChart.cshtml 。请注意，这次时间戳已更改，因为缓存已被清除。因此，代码必须重新生成图表并将其放回缓存中。

将图表另存为图像文件

还可以将图表保存为图像文件 (例如，作为 服务器上的.jpg 文件) 。然后，可以像使用任何图像一样使用映像文件。优点是文件是存储的，而不是保存到临时缓存中。可以在不同时间保存新的图表图像 (例如，每小时) 保存一次，然后永久记录随时间推移发生的更改。请注意，必须确保 Web 应用程序有权将文件保存到要放置图像文件的服务器上的文件夹中。

在网站的根目录中，创建一个名为 _ChartFiles 的文件夹（如果尚不存在）。
在网站的根目录中，创建名为 ChartSave.cshtml 的新文件。

将现有内容替换为以下内容：

@{
    var filePathName = "_ChartFiles/chart01.jpg";
    if (!File.Exists(Server.MapPath(filePathName))) {
        var chartImage = new Chart(600, 400);
        chartImage.AddTitle("Chart Title");
        chartImage.AddSeries(
                name: "Employee",
                axisLabel: "Name",
                xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" },
                yValues: new[] { "2", "6", "4", "5", "3" });
        chartImage.Save(path: filePathName);
    }
}
<!DOCTYPE html>
<html>
    <head>
        <title>Chart Example</title>
    </head>
    <body>
        <img src="@filePathName" />
    </body>
</html>

代码首先通过调用 File.Exists 方法检查.jpg文件是否存在。如果文件不存在，则代码将从数组创建一个新的 Chart 。这一次，代码调用 Save 方法并传递 path 参数以指定保存图表的文件路径和文件名。在页面正文中， <img> 元素使用路径指向要显示的 .jpg 文件。

运行 ChartSave.cshtml 文件。
返回到 WebMatrix。请注意，名为 chart01.jpg 的图像文件已保存在 _ChartFiles 文件夹中。

将图表另存为 XML 文件

最后，可以将图表保存为服务器上的 XML 文件。使用此方法比缓存图表或将图表保存到文件的优点是，如果需要，可以在显示图表之前修改 XML。应用程序必须对要放置图像文件的服务器上的文件夹具有读/写权限。

在网站的根目录中，创建名为 ChartSaveXml.cshtml 的新文件。

将现有内容替换为以下内容：

@{
    Chart chartXml;
    var filePathName = "_ChartFiles/XmlChart.xml";
    if (File.Exists(Server.MapPath(filePathName))) {
        chartXml = new Chart(width: 600,
                             height: 400,
                             themePath: filePathName);
    }
    else {
        chartXml = new Chart(width: 600,
                             height: 400);
        chartXml.AddTitle("Chart Title -- Saved at " + DateTime.Now);
        chartXml.AddSeries(
            name: "Employee",
            axisLabel: "Name",
            xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
            yValues: new[] { "2", "6", "4", "5", "3" });
        chartXml.SaveXml(path: filePathName);
    }
    chartXml.Write();
}

此代码类似于前面用于在缓存中存储图表的代码，只不过它使用 XML 文件。代码首先通过调用 File.Exists 方法检查 XML 文件是否存在。如果文件确实存在，则代码将创建一个新的 Chart 对象，并将文件名作为 themePath 参数传递。这会基于 XML 文件中的内容创建图表。如果 XML 文件尚不存在，代码会像正常一样创建图表，然后调用 SaveXml 保存它。图表是使用 Write 方法呈现的，如前所述。

与显示缓存的页面一样，此代码在图表标题中包含时间戳。

创建名为 ChartDisplayXMLChart.cshtml 的新页面，并向其添加以下标记：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Display chart from XML</title>
  </head>
  <body>
    <img src="ChartSaveXML.cshtml" />
  </body>
</html>

运行 ChartDisplayXMLChart.cshtml 页。图中显示了图表。记下图表标题中的时间戳。
关闭浏览器。
在 WebMatrix 中，右键单击 _ChartFiles 文件夹，单击“ 刷新”，然后打开该文件夹。此文件夹中 的XMLChart.xml 文件是由 Chart 帮助程序创建的。
再次运行 ChartDisplayXMLChart.cshtml 页。该图表显示的时间戳与首次运行页面时的时间戳相同。这是因为图表是从之前保存的 XML 生成的。
在 WebMatrix 中，打开 _ChartFiles 文件夹并删除 XMLChart.xml 文件。
再次运行 ChartDisplayXMLChart.cshtml 页。这一次，时间戳会更新，因为 Chart 帮助程序必须重新创建 XML 文件。如果需要，检查_ChartFiles文件夹，并注意 XML 文件已恢复。

使用 ASP.NET 网页 (Razor) 在图表中显示数据

图表帮助程序

图表元素

从数据创建图表

使用数组

对图表数据使用数据库查询

使用 XML 数据

“Using”语句和完全限定名称

在网页内显示图表

设置图表样式

保存图表

缓存图表

将图表另存为图像文件

将图表另存为 XML 文件

其他资源

反馈

反馈

其他资源