ASP.NET Web ページを使用してグラフにデータを表示する (Razor)

[アーティクル]
07/13/2023

この記事では、ヘルパーを使用してグラフを使用して ASP.NET Web ページ (Razor) Web サイトにデータを表示するChart方法について説明します。

学習内容:

グラフにデータを表示する方法。

組み込みのテーマを使用してグラフのスタイルを設定する方法。

グラフを保存する方法と、パフォーマンスを向上させるためにそれらをキャッシュする方法。

この記事で紹介する ASP.NET プログラミング機能を次に示します。

Chartヘルパー。

Note

この記事の情報は、ASP.NET Web ページ 1.0 および Web ページ 2 に適用されます。

グラフヘルパー

データをグラフィカルな形式で表示する場合は、ヘルパーを使用 Chart できます。ヘルパーは Chart 、さまざまなグラフの種類のデータを表示する画像をレンダリングできます。書式設定とラベル付けの多くのオプションがサポートされています。ヘルパーは Chart 、30 種類を超えるグラフをレンダリングできます。これには、Microsoft Excel やその他のツールで使い慣れている可能性のあるすべての種類のグラフ (面グラフ、横棒グラフ、縦棒グラフ、折れ線グラフ、円グラフなど)、さらに特殊なグラフ (株価チャートなど) が含まれます。

面グラフ	横棒グラフ
縦棒グラフ	折れ線グラフ
円グラフ	株価チャート

グラフ要素

グラフには、凡例、軸、系列などのデータとその他の要素が表示されます。次の図は、ヘルパーを使用するときにカスタマイズできるグラフ要素の多くを Chart 示しています。この記事では、これらの要素の一部 (すべてではない) を設定する方法について説明します。

説明: グラフ要素を示す図

データからグラフを作成する

グラフに表示するデータは、配列、データベースから返された結果、または XML ファイル内のデータから取得できます。

配列の使用

「Razor 構文を使用した ASP.NET Web ページプログラミングの概要」で説明したように、配列を使用すると、類似する項目のコレクションを 1 つの変数に格納できます。配列を使用して、グラフに含めるデータを格納できます。

この手順では、既定のグラフの種類を使用して、配列内のデータからグラフを作成する方法を示します。また、ページ内にグラフを表示する方法も示します。

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、 xValue、および yValues パラメーターを AddSeries 使用します。パラメーターは name グラフの凡例に表示されます。パラメーターには xValue 、グラフの横軸に沿って表示されるデータの配列が含まれます。パラメーターには yValues 、グラフの垂直点をプロットするために使用されるデータの配列が含まれています。

メソッドは Write 実際にグラフをレンダリングします。この場合、グラフの種類を指定していないため、ヘルパーは既定の Chart グラフ (縦棒グラフ) をレンダリングします。
ブラウザーでページを実行します。ブラウザーにグラフが表示されます。

グラフデータに対するデータベースクエリの使用

グラフ化する情報がデータベース内にある場合は、データベースクエリを実行し、結果のデータを使用してグラフを作成できます。この手順では、「ASP.NET Web ページサイトでのデータベースの操作の概要」の記事で作成したデータベースからデータを読み取り、表示する方法について説明します。

フォルダーがまだ存在しない場合は、 App_Data フォルダーを Web サイトのルートに追加します。
App_Data フォルダーに、SmallBakery.sdf という名前のデータベースファイルを追加します。これは、「ASP.NET Web ページサイトでのデータベースの操作の概要」で説明されています。
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 のメソッドを呼び出してデータベースクエリを渡します。このメソッドは、2 つのパラメーター dataSource を受け取ります。パラメーターはクエリのデータ用であり xField 、パラメーターを使用すると、グラフの x 軸に使用するデータ列を設定できます。

メソッドを使用DataBindTableする代わりに、ヘルパーのメソッドをAddSeriesChart使用できます。 AddSeriesメソッドを使用すると、パラメーターと yValues パラメーターをxValue設定できます。たとえば、次のようなメソッドを使用する代わりに、DataBindTable
```
.DataBindTable(data, "Name")
```
メソッドは AddSeries 次のように使用できます。
```
.AddSeries("Default",
    xValue: data, xField: "Name",
    yValues: data, yFields: "Price")
```
どちらも同じ結果をレンダリングします。グラフの AddSeries 種類とデータをより明示的に指定できるため、メソッドの柔軟性が向上しますが、追加の DataBindTable 柔軟性が必要ない場合は、メソッドを使用する方が簡単です。
ブラウザーでページを実行します。

XML データの使用

グラフ作成の 3 番目のオプションは、グラフのデータとして XML ファイルを使用することです。これには、XML ファイルに XML 構造を記述するスキーマファイル (.xsd ファイル) も含まれている必要があります。この手順では、XML ファイルからデータを読み取る方法を示します。

App_Data フォルダーに、という名前の新しい XML ファイルdata.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>

Web サイトのルートで、 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 使用してデータにバインドします。これは、配列データをグラフ化するときに前に見たとおりです。ただし、今回 xValue はパラメーターと yValues パラメーターがオブジェクトに設定されている点が DataView 除きます。

この例では、特定のグラフの種類を指定する方法も示します。メソッドに AddSeries データを追加すると、パラメーターも設定され、 chartType 円グラフが表示されます。
ブラウザーでページを実行します。

ヒント

"Using" ステートメントと完全修飾名

Razor 構文で ASP.NET Web ページする.NET Frameworkは、何千ものコンポーネント (クラス) で構成されています。これらのすべてのクラスを操作しやすくするために、ライブラリのような 名前空間に編成されています。たとえば、 System.Web 名前空間にはブラウザー/サーバー通信をサポートするクラスが含まれており、 System.Xml 名前空間には XML ファイルの作成と読み取りに使用されるクラスが含まれており、 System.Data 名前空間にはデータを操作できるクラスが含まれています。

.NET Framework内の特定のクラスにアクセスするには、クラス名だけでなく、クラスが存在する名前空間もコードで認識する必要があります。たとえば、ヘルパーを使用Chartするには、名前空間 () とクラス名Chart (System.Web.Helpers) を組み合わせたクラスを見つけるSystem.Web.Helpers.Chart必要があります。これは、クラスの完全修飾名と呼ばれ、.NET Frameworkの広大な範囲内の完全で明確な場所です。コードでは、これは次のようになります。

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

ただし、クラスまたはヘルパーを参照するたびに、これらの長い完全修飾名を使用する必要が生じにくい (エラーが発生しやすい) ことがあります。そのため、クラス名を使いやすくするために、関心のある名前空間をインポートできます。これは通常、.NET Framework内の多くの名前空間の中からほんの一握りです。名前空間をインポートした場合は、完全修飾名 () の代わりにクラス名System.Web.Helpers.Chart (Chart) のみを使用できます。コードが実行され、クラス名が見つかると、インポートした名前空間だけを調べるだけで、そのクラスを見つけることができます。

ASP.NET Web ページと Razor 構文を使用して Web ページを作成する場合、通常は、クラス、さまざまなヘルパーなどWebPage、毎回同じクラスセットを使用します。 Web サイトを作成するたびに関連する名前空間をインポートする作業を節約するために、ASP.NET はすべての Web サイトのコア名前空間のセットを自動的にインポートするように構成されます。そのため、今まで名前空間やインポートに対処する必要はありません。作業したすべてのクラスは、既にインポートされている名前空間にあります。

ただし、自動的にインポートされる名前空間にないクラスを操作する必要がある場合があります。その場合は、そのクラスの完全修飾名を使用するか、クラスを含む名前空間を手動でインポートできます。名前空間をインポートするには、前の using 記事の例で示したように、ステートメント (import Visual Basic では ) を使用します。

たとえば、 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できます。ただし、説明したように、これを頻繁に行う必要はありません。使用するクラスのほとんどは、 .cshtml ページと .vbhtml ページで使用するために ASP.NET によって自動的にインポートされる名前空間にあるためです。

Web ページ内でのグラフの表示

ここまでに示した例では、グラフを作成した後、グラフがグラフィックとしてブラウザーに直接レンダリングされます。ただし、多くの場合、グラフをブラウザーだけでなくページの一部として表示する必要があります。そのためには、2 段階のプロセスが必要です。最初の手順は、既に確認したように、グラフを生成するページを作成することです。

2 番目の手順では、結果の画像を別のページに表示します。画像を表示するには、画像を表示するのと同じ方法で HTML <img> 要素を使用します。ただし、要素は、.jpgまたは.png ファイルを参照する代わりに、<img>グラフを作成するヘルパーを含む Chart.cshtml ファイルを参照します。表示ページが実行されると、要素は <img> ヘルパーの出力を Chart 取得し、グラフをレンダリングします。

Web ページ内に表示されるグラフのスクリーンショット。

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 ファイルで前に作成したグラフを表示します。

ブラウザーで Web ページを実行します。 ShowChart.cshtml ファイルには、ChartArrayBasic.cshtml ファイルに含まれるコードに基づいてグラフイメージが表示されます。

グラフのスタイル設定

ヘルパーは Chart 、グラフの外観をカスタマイズできる多数のオプションをサポートしています。色、フォント、罫線などを設定できます。グラフの外観をカスタマイズする簡単な方法は、テーマを使用 することです。テーマは、フォント、色、ラベル、パレット、枠線、効果を使用したグラフの表示方法を指定する情報の集まりです。 (グラフのスタイルはグラフの種類を示していません。

次の表に、組み込みのテーマを示します。

切り替え	Description
`Vanilla`	白い背景に赤い列を表示します。
`Blue`	青いグラデーションの背景に青い列を表示します。
`Green`	緑のグラデーションの背景に青い列を表示します。
`Yellow`	黄色のグラデーションの背景にオレンジ色の列を表示します。
`Vanilla3D`	白い背景に 3-D の赤い列を表示します。

新しいグラフを作成するときに使用するテーマを指定できます。

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();
}

このコードは、データにデータベースを使用する前の例と同じですが、オブジェクトを theme 作成するときにパラメーターを Chart 追加します。変更されたコードを次に示します。

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

ブラウザーでページを実行します。以前と同じデータが表示されますが、グラフはより洗練されたように見えます。

グラフの保存

この記事でこれまでに説明したようにヘルパーを Chart 使用すると、呼び出されるたびに、ヘルパーによってグラフが最初から再作成されます。必要に応じて、グラフのコードもデータベースのクエリを再実行するか、XML ファイルを再読み取りしてデータを取得します。場合によっては、クエリを実行するデータベースが大きい場合や、XML ファイルに大量のデータが含まれている場合など、複雑な操作になることがあります。グラフに多くのデータが含まれていない場合でも、イメージを動的に作成するプロセスによってサーバーリソースが占有され、多くのユーザーがグラフを表示するページを要求すると、Web サイトのパフォーマンスに影響する可能性があります。

グラフの作成によるパフォーマンスへの潜在的な影響を軽減するために、グラフを初めて必要なときに作成し、保存することができます。グラフを再生成するのではなく、グラフが再び必要になった場合は、保存したバージョンをフェッチしてレンダリングするだけです。

次の方法でグラフを保存できます。

(サーバー上の) コンピューターメモリにグラフをキャッシュします。
グラフを画像ファイルとして保存します。
グラフを XML ファイルとして保存します。このオプションを使用すると、グラフを保存する前にグラフを変更できます。

グラフのキャッシュ

グラフを作成したら、キャッシュできます。グラフをキャッシュするということは、グラフを再度表示する必要がある場合に再作成する必要がないことを意味します。キャッシュにグラフを保存するときは、そのグラフに一意である必要があるキーを指定します。

サーバーがメモリ不足の場合、キャッシュに保存されたグラフが削除される可能性があります。さらに、何らかの理由でアプリケーションが再起動すると、キャッシュはクリアされます。したがって、キャッシュされたグラフを操作する標準的な方法は、キャッシュ内で使用可能かどうかに関係なく常に最初にチェックし、そうでない場合は作成または再作成することです。

Web サイトのルートで、 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 は、この例のキャッシュをテストするためにのみ必要です。キャッシュされたグラフを操作するときに通常含めるリンクやページではありません。
Web サイトのルートで、 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 - ) がタイトルに追加されます)。
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 Web ページを実行します。このページには、 ChartSaveToCache.cshtml ファイルに含まれるコードに基づいてグラフイメージが表示されます。タイムスタンプがグラフタイトルに表示される内容をメモしておきます。
ブラウザーを閉じます。
ShowCachedChart.cshtml をもう一度実行します。タイムスタンプは以前と同じであることに注意してください。これは、グラフが再生成されなかったが、代わりにキャッシュから読み取られたことを示します。
ShowCachedChart.cshtml で、[キャッシュのクリア] リンクをクリックします。これにより、キャッシュがクリアされたことを報告する ClearCache.cshtml に移動します。
[ ShowCachedChart.cshtml に戻る ] リンクをクリックするか、WebMatrix から ShowCachedChart.cshtml を再実行します。今回は、キャッシュがクリアされたため、タイムスタンプが変更されていることに注意してください。そのため、コードではグラフを再生成し、キャッシュに戻す必要がありました。

グラフをイメージファイルとして保存する

グラフをイメージファイル (たとえば 、.jpg ファイル) としてサーバーに保存することもできます。その後、イメージファイルを任意のイメージと同じように使用できます。利点は、ファイルが一時キャッシュに保存されるのではなく、保存される点です。新しいグラフ画像を異なる時間 (1 時間ごとなど) に保存し、時間の経過と同時に発生した変更の永続的な記録を保持できます。 Web アプリケーションに、イメージファイルを配置するサーバー上のフォルダーにファイルを保存するアクセス許可があることを確認する必要があることに注意してください。

Web サイトのルートで、まだ存在しない場合 は、_ChartFiles という名前のフォルダーを作成します。
Web サイトのルートで、 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 を変更できることです。アプリケーションには、イメージファイルを配置するサーバー上のフォルダーに対する読み取り/書き込みアクセス許可が必要です。

Web サイトのルートで、 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 ページをもう一度実行します。今回は、ヘルパーが XML ファイルを Chart 再作成する必要があったため、タイムスタンプが更新されます。必要な場合は、_ChartFiles フォルダーをチェックし、XML ファイルが戻っていることを確認します。

その他のリソース

ASP.NET Web ページサイトでのデータベースの操作の概要
ASP.NET Web ページサイトでキャッシュを使用してパフォーマンスを向上させる
Chart クラス (MSDN ASP.NET Web ページ API リファレンス)

ASP.NET Web ページを使用してグラフにデータを表示する (Razor)

グラフヘルパー

グラフ要素

データからグラフを作成する

配列の使用

グラフデータに対するデータベースクエリの使用

XML データの使用

"Using" ステートメントと完全修飾名

Web ページ内でのグラフの表示

グラフのスタイル設定

グラフの保存

グラフのキャッシュ

グラフをイメージファイルとして保存する

グラフを XML ファイルとして保存する

その他のリソース

フィードバック

フィードバック

その他のリソース

ASP.NET Web ページを使用してグラフにデータを表示する (Razor)

グラフ ヘルパー

グラフ要素

データからグラフを作成する

配列の使用

グラフ データに対するデータベース クエリの使用

XML データの使用

"Using" ステートメントと完全修飾名

Web ページ内でのグラフの表示

グラフのスタイル設定

グラフの保存

グラフのキャッシュ

グラフをイメージ ファイルとして保存する

グラフを XML ファイルとして保存する

その他のリソース

フィードバック

フィードバック

その他のリソース

グラフヘルパー

グラフデータに対するデータベースクエリの使用

グラフをイメージファイルとして保存する