在图表中显示的数据可以来自数组、从数据库返回的结果或 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 该方法。 在此示例中,将使用方法的 name AddSeries xValue yValues 参数。 该 name 参数显示在图表图例中。 该 xValue 参数包含沿图表水平轴显示的数据数组。 该 yValues 参数包含用于绘制图表垂直点的数据数组。

    该方法 Write 实际上呈现图表。 在这种情况下,由于未指定图表类型, Chart 帮助程序会呈现其默认图表,即柱形图。

  • 在浏览器中运行页面。 浏览器显示图表。

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

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

  • 如果文件夹尚不存在,请将 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();

    The code first opens the SmallBakery database and assigns it to a variable named db . 此变量表示 Database 可用于从数据库读取和写入数据库的对象。 接下来,代码运行 SQL 查询以获取每个产品的名称和价格。 该代码将创建新的图表,并通过调用图表 DataBindTable 的方法将数据库查询传递给它。 此方法采用两个参数:参数 dataSource 用于查询中的数据,参数 xField 允许你设置用于图表 x 轴的数据列。

    作为使用该方法 DataBindTable Chart 替代方法,可以使用 AddSeries 帮助程序的方法。 使用此方法 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 对象。有关详细信息,请参阅本文后面的 “Using”语句和完全限定名称 。)

    接下来,代码基于数据集创建对象 DataView 。 数据视图提供图表可以绑定到的对象,即读取和绘制。 图表使用 AddSeries 该方法绑定到数据,如之前在绘制数组数据图表时所见,但这次将 xValueyValues 参数设置为 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 已配置,以便自动为每个网站导入一组核心命名空间。 这就是为什么你不必处理命名空间或导入到现在:你使用的所有类都位于已为你导入的命名空间中。

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

    例如,类 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>
        <title>Chart Example</title>
      </head>
        <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 的类型。)

    下表列出了内置主题。

    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>
            <title>Chart Example</title>
        </head>
        <h1>Chart Example</h1>
        <img src="ChartSaveToCache.cshtml?key=myChartKey" />
        <p><a href="ClearCache.cshtml">Clear cache</a></p>
    </body>
    </html>
    

    <img> 标记包含一个 src 指向 ChartSaveToCache.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"> <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> <title>Chart Example</title> </head> <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>
        <meta charset="utf-8" />
        <title>Display chart from XML</title>
      </head>
        <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 网页 站点中使用数据库简介
  • 使用 ASP.NET 网页站点中的缓存来提高性能
  • MSDN) 上的图表类 (ASP.NET 网页 API 参考
  •