ASP.NET Web Pages - Chart 帮助器
Chart ヘルパー - 多くの有用な ASP.NET Web ヘルパーの 1 つです。
Chart ヘルパー
前の章では、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ファイルをグラフのデータとして使用することです：
实例
@{
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();}
}
运行实例 »