ASP.NET Web Pages - Chart ヘルパー

Chart - ASP.NET Web ヘルパーの多くの一つです。

Chart Helper

前章では、ASP.NET「ヘルパー」の使用方法について学びました。

「WebGrid ヘルパー」を使用してデータをグリッドに表示する方法について学びました。

本章では、「Chart ヘルパー」を使用してデータをグラフに表示する方法について説明します。

「Chart ヘルパー」は、さまざまな形式とマークで異なる種類のグラフ画像を作成できます。それは、面積図、棒グラフ、円グラフ、折れ線グラフ、円グラフなど、標準的なグラフだけでなく、より専門的なグラフ（株価チャートなど）も作成できます。

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

配列からのグラフ

以下の例では、配列からのデータを使用してグラフを表示するコードが示されています：

例

@{ 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Employees") 
   .AddSeries(chartType: "column",
      xValue: new[] {  "Peter", "Andrew", "Julie", "Mary", "Dave" }, 
      yValues: new[] { "2", "6", "4", "5", "3" }) 
   .Write();
}

インスタンスを実行

new Chart 新しいグラフオブジェクトを生成し、幅と高さを設定します。

AddTitle メソッドはグラフのタイトルを指定します。

AddSeries メソッドはデータをグラフに追加します。

chartType パラメータはグラフのタイプを定義します。

xValue パラメータは x 軸の値を定義します。

yValues パラメータは y 軸の値を定義します。

Write() メソッドはグラフを表示します。

データベースからのグラフ

まず一度データベースクエリを実行し、その結果を使用してグラフを作成することができます：

例

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

インスタンスを実行

var db = Database.Open データベースを開き（データベースオブジェクトを変数 db に割り当てます）。

var dbdata = db.Query データベースクエリを実行し、結果を dbdata に保存します。

new Chart 新しいグラフオブジェクトを生成し、幅と高さを設定します。

AddTitle メソッドはグラフのタイトルを指定します。

DataBindTable メソッドはデータソースをグラフにバインドします。

Write() メソッドはグラフを表示します。

DataBindTable メソッドの代替案として、AddSeries（前の例を参照）を使用します。DataBindTable は使いやすく、AddSeries は伸縮性が強く、グラフとデータをより正確に指定できます：

例

@{ 
var db = Database.Open("SmallBakery") 
var dbdata = db.Query("SELECT Name, Price FROM Product") 
var myChart = new Chart(width: 600, height: 400) 
   .AddTitle("Product Sales") 
   .AddSeries(chartType:"Pie",
      xValue: dbdata, xField: "Name",
      yValues: dbdata, yFields: "Price")
   .Write();
}

インスタンスを実行

XMLデータからのグラフ

グラフを作成するために使用できる第3のオプションは、XMLファイルを使用してデータをグラフにする方法です：

例

@using System.Data;
@{
var dataSet = new DataSet()
dataSet.ReadXmlSchema(Server.MapPath("data.xsd"))
dataSet.ReadXml(Server.MapPath("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();}
}

インスタンスを実行