ASP.NET Webページのチャート
チャートヘルパー - 多くの有用なASP.NETのWebヘルパーの一つ。
チャートヘルパー
前の章では、ASP.NETの使用方法を学んだ "ヘルパーを。」
既に述べたように、グリッド内のデータを表示するには、「WebGridのヘルパー」を使用する方法について説明しました。
この章では、データをグラフィカルに表示される「チャートヘルパー」を使用する方法について説明します。
「チャート・ヘルパーは、「書式設定のさまざまなオプションとチャート画像とラベルの種類を作成することができます。 これは、面グラフ、棒グラフ、縦棒グラフ、折れ線グラフ、円グラフや他の規格を作成することができ、それが株価チャートのような、より専門的なグラフを作成することができます。
データがアレイからチャートに表示することができ、データは、データベースまたはファイルです。
配列に基づいてグラフを作成します。
次の例では、アレイからのデータをグラフ化するために必要なコードを示しています。
例
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();
}
実行中のインスタンス»
-新しいグラフは、新しいグラフオブジェクトを作成し、その幅と高さを設定します
- 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();
}
実行中のインスタンス»
-ヴァールデシベル= Database.Openデータベース(変数デシベルに割り当てられたデータベースオブジェクト)を開きます
-ヴァールdbdataの= db.Queryデータベースクエリを実行し、dbdataの中で結果を保存
-新しいグラフは、新しいグラフオブジェクトを作成し、その幅と高さを設定します
- 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();}
}
実行中のインスタンス»