チャートヘルパー - 多くの有用なASP.NETのWebヘルパーのひとつ。
チャートヘルパー
前の章では、ASP.NETを使用する方法を学んだ"Helper" 。
あなたは使用してグリッド内のデータを表示する方法を学びました"WebGrid Helper" 。
この章では、使用して、グラフ形式でデータを表示する方法を説明し"Chart Helper" 。
"Chart Helper"多くのフォーマットオプションとラベルと異なる種類のチャート画像を作成することができます。 これは、株価チャートのような、より専門的なチャートとともに、面グラフ、棒グラフ、縦棒グラフ、折れ線グラフ、円グラフのような標準的なグラフを作成することができます。
あなたがチャートに表示されるデータは、アレイから、データベースから、またはファイル内のデータから得ることができます。
配列からチャート
以下の例では、値の配列からチャートを表示するために必要なコードを示します。
例
@{
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データからグラフ
チャート作成のための第三の選択肢は、グラフのデータとして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();}
} »実行例