在具有 ASP.NET Web Pages (Razor) 的圖表中顯示資料

發行項
07/13/2023

本文說明如何使用圖表，使用協助程式在 ASP.NET Web Pages (Razor) 網站 Chart 中顯示資料。

您將瞭解的內容：

如何在圖表中顯示資料。

如何使用內建主題來設定圖表樣式。

如何儲存圖表，以及如何快取圖表以取得更好的效能。

以下是文章仲介紹的 ASP.NET 程式設計功能：

協助 Chart 程式。

注意

本文中的資訊適用于 ASP.NET Web Pages 1.0 和網頁 2。

圖表協助程式

當您想要以圖形形式顯示資料時，可以使用 Chart 協助程式。協助 Chart 程式可以轉譯影像，以各種圖表類型顯示資料。它支援許多格式化和標籤的選項。協助 Chart 程式可以轉譯超過 30 種類型的圖表，包括您可能熟悉的 Microsoft Excel 或其他工具的所有圖表類型，例如區域圖、橫條圖、直條圖、折線圖和圓形圖，以及更特殊的圖表，例如股票圖。

區域圖	條形
直條圖	折線圖
圓形圖	股票圖表

圖表項目

圖表會顯示資料和其他元素，例如圖例、軸、數列等等。下圖顯示您可以在使用 Chart 協助程式時自訂的許多圖表元素。本文說明如何設定部分 (並非所有元素) 。

描述：顯示圖表元素的圖片

從資料建立圖表

您在圖表中顯示的資料可以是來自陣列、從資料庫傳回的結果，或從 XML 檔案中的資料。

使用陣列

如使用 Razor 語法 ASP.NET Web Pages程式設計簡介中所述，陣列可讓您將類似專案的集合儲存在單一變數中。您可以使用陣列來包含您想要包含在圖表中的資料。

此程式示範如何使用預設圖表類型，從陣列中的資料建立圖表。它也會示範如何在頁面內顯示圖表。

建立名為 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 Web Pages網站中使用資料庫一文中所建立之資料庫的資料。

如果資料夾不存在，請將 App_Data 資料夾新增至網站的根目錄。
在[App_Data]資料夾中，新增名為SmallBakery.sdf的資料庫檔案，如 ASP.NET Web Pages Sites 中使用資料庫簡介中所述。
建立名為 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 Web Pages.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 Web Pages 搭配 Razor 語法來建立網頁時，您通常會每次使用相同的類別集，包括 WebPage 類別、各種協助程式等等。為了節省每次建立網站時匯入相關命名空間的工作，ASP.NET 設定好，因此會自動為每個網站匯入一組核心命名空間。這就是您目前不需要處理命名空間或匯入的原因;您已使用的所有類別都位於已為您匯入的命名空間中。

不過，有時候您需要使用不在為您自動匯入之命名空間中的類別。在此情況下，您可以使用該類別的完整名稱，也可以手動匯入包含類別的命名空間。若要匯入命名空間，您可以在 Visual Basic) 中使用 using 語句 (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> 元素，就像顯示任何影像一樣。不過，元素不會參考.jpg或.png檔案，而是 <img> 參考包含 Chart 建立圖表之協助程式的.cshtml檔案。當顯示頁面執行時，元素 <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`	在白色背景上顯示 3D 紅色資料行。

您可以指定建立新圖表時要使用的主題。

建立名為 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 檔案。程式碼會先檢查 XML 檔案是否存在，方法是呼叫 File.Exists 方法。如果檔案存在，程式碼會建立新的 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 資料夾，按一下 [ 重新整理]，然後開啟資料夾。協助程式已 Chart 建立此資料夾中的XMLChart.xml檔案。
再次執行 ChartDisplayXMLChart.cshtml 頁面。圖表會顯示與您第一次執行頁面時相同的時間戳記。這是因為圖表是從您稍早儲存的 XML 產生。
在 WebMatrix 中，開啟 _ChartFiles 資料夾，並刪除 XMLChart.xml 檔案。
再次執行 ChartDisplayXMLChart.cshtml 頁面。這次會更新時間戳記，因為 Chart 協助程式必須重新建立 XML 檔案。如有需要，請檢查 _ChartFiles 資料夾，並注意 XML 檔案已返回。

在具有 ASP.NET Web Pages (Razor) 的圖表中顯示資料

圖表協助程式

圖表項目

從資料建立圖表

使用陣列

針對圖表資料使用資料庫查詢

使用 XML 資料

「Using」語句和完整名稱

在網頁內顯示圖表

設定圖表的樣式

儲存圖表

快取圖表

將圖表儲存為影像檔

將圖表儲存為 XML 檔案

其他資源

意見反應

意見反應

其他資源

在具有 ASP.NET Web Pages (Razor) 的圖表中顯示資料

圖表協助程式

圖表項目

從資料建立圖表

使用陣列

針對圖表資料使用資料庫查詢

使用 XML 資料

「Using」 語句和完整名稱

在網頁內顯示圖表

設定圖表的樣式

儲存圖表

快取圖表

將圖表儲存為影像檔

將圖表儲存為 XML 檔案

其他資源

意見反應

意見反應

其他資源

「Using」語句和完整名稱