ASP.NET WP-チャート

この章では、チャートヘルパーとチャートにデータを表示する方法について説明します。前の章では、WebGridヘルパーにデータを表示しました。 *グラフヘルパー*を使用して、*グラフィック形式*でデータを表示できます。

チャートヘルパーは、さまざまなチャートタイプでデータを表示する画像をレンダリングできます。
また、さまざまなフォーマットおよびラベル付けオプションをサポートできます。
*面グラフ、棒グラフ、縦棒グラフなど、Microsoft Officeで見たかもしれない30種類以上のグラフをレンダリングできます。
チャートには、データと、*凡例、軸、シリーズ*などの追加要素が表示されます。
チャートに表示するデータは、配列、データベースから返された結果、またはXMLファイルにあるデータから取得できます。

チャートにデータを表示する方法は？

チャートにデータを表示する簡単な例を見てみましょう。そのため、最初に新しいCSHTMLファイルを作成する必要があります。

名前フィールドに Charts.cshtml と入力して[OK]をクリックし、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* メソッドを使用してデータを追加し、AddSeriesメソッドのxValueおよびyValuesパラメーターに値を割り当てることができます。 名前パラメーターは、グラフの凡例に表示されます。

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

xValueパラメーターには、チャートの水平軸に沿って表示されるデータの配列が含まれ、yValuesパラメーターには、チャートの垂直ポイントのプロットに使用されるデータの配列が含まれます。

Writeメソッド*は実際にチャートをレンダリングします。この場合、チャートタイプを指定しなかったため、Chartヘルパーはデフォルトのチャートである縦棒チャートをレンダリングします。

アプリケーションを実行し、次のURLを指定してみましょう- http：//localhost：36905/charts 。次のWebページが表示されます。

グラフ

ここで、データベースクエリを使用してデータを取得し、そのデータがグラフに表示される別の例を見てみましょう。そのため、次のスクリーンショットに示すように、まずデータベースに別のStudentテーブルを追加する必要があります。

データの取得

次のスクリーンショットに示すように、Studentsテーブルにデータを追加しましょう。

学生テーブル

ご覧のとおり、Studentデータがあります。

次に、このデータをグラフに表示するために、新しいCSHTMLファイルを作成しましょう。

チャートのデータ

[名前]フィールドに 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");

次に、StudentsテーブルからFirstNameとMarksを取得する簡単なSQLクエリが作成されます。

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

このメソッドは2つのパラメーターを取ります

dataSource パラメーターは、クエリからのデータ用です。
xField パラメーターを使用すると、チャートのx軸に使用するデータ列を設定できます。

次に、このアプリケーションを実行して、次のURLを指定します- http：//localhost：36905/ChartDataUsingDB 。次のWebページが表示されます。

チャートデータ

DataBindTableの代わりにAddSeriesメソッドを使用できます。また、次のコードに示すように、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 。次のWebページが表示されます。

テーマの指定

次のコードで説明するように、チャートの作成中にテーマパラメータを指定するだけで、チャートのテーマを変更することもできます。

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

このアプリケーションを再度実行して、次のURLを指定します- http：//localhost：36905/ChartDataUsingDB 。次のWebページが表示されます。

Chart DataUsing

Asp.net-wp-charts

ASP.NET WP-チャート

チャートにデータを表示する方法は？