ASP.NETWebページ-チャートヘルパー
チャートヘルパー-多くの便利なASP.NETWebヘルパーの1つ。
チャートヘルパー
前の章では、ASP.NETの「ヘルパー」の使用方法を学びました。
「WebGridHelper」を使用してグリッドにデータを表示する方法を学びました。
この章では、「チャートヘルパー」を使用してデータをグラフ形式で表示する方法について説明します。
「チャートヘルパー」は、多くのフォーマットオプションとラベルを使用して、さまざまなタイプのチャート画像を作成できます。面積グラフ、棒グラフ、縦棒グラフ、折れ線グラフ、円グラフなどの標準的なグラフと、株価グラフなどのより専門的なグラフを作成できます。
グラフに表示するデータは、配列、データベース、またはファイル内のデータからのものにすることができます。
配列からのチャート
次の例は、値の配列からグラフを表示するために必要なコードを示しています。
例
@{
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();}
}
チャートオブジェクトリファレンス
| Helper | Description |
|---|---|
| Chart(width, height [, template] [, templatePath]) | Initializes a chart. |
| Chart.AddLegend([title] [, name]) | Adds a legend to a chart. |
| Chart.AddSeries([name] [, chartType]
[, chartArea] [, axisLabel] [, legend] [, markerStep] [, xValue] [, xField] [, yValues] [, yFields] [, options]) |
Adds a series of values to the chart. |