Chart Helper - 多くの便利な ASP.NET Web ヘルパーの 1 つ。
グラフ ヘルパーを使用すると、データをグラフに表示できます。このセクションでは、グラフ ヘルパーの具体的な使用方法について説明します。
前の章では、ASP.NET の「ヘルパー」の使用方法を学習しました。
「WebGrid Helper」を使用してデータをグリッドに表示する方法についてはすでに説明しました。
この章では、チャート ヘルパーを使用してデータをグラフィカルに表示する方法について説明します。
「チャート ヘルパー」は、さまざまな書式設定オプションやラベルを使用して、さまざまなタイプのチャート画像を作成できます。面グラフ、棒グラフ、縦棒グラフ、折れ線グラフ、円グラフなどの標準的なグラフだけでなく、株価チャートなどのより専門的なグラフも作成できます。
グラフに表示されるデータは、配列、データベース、またはファイルから取得できます。
次の例は、配列データに基づいてグラフを表示するために必要なコードを示しています。
@{ var myChart = new Chart(幅: 600, 高さ: 400) .AddTitle("従業員") .AddSeries(chartType: "column",xValue: new[] { "ピーター", "アンドリュー", "ジュリー", "メアリー", "デイブ" }, 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("製品から名前、価格を選択"); var myChart = new Chart(幅: 600、高さ: 400) .AddTitle("製品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("製品から名前、価格を選択"); var myChart = new Chart(幅: 600、高さ: 400) .AddTitle("製品Sales") .AddSeries(chartType:"Pie",xValue: dbdata, xField: "名前",yValues: dbdata, yFields: "価格").Write();}チャートを作成する 3 番目の方法は、XML ファイルをチャートのデータとして使用することです。
@using System.Data;@{var dataSet = new DataSet();dataSet.ReadXmlSchema(Server.MapPath("data.xsd"));dataSet.ReadXml(Server.MapPath("data.xml"));var dataView = 新しい DataView(dataSet.Tables[0]);var myChart = 新しいグラフ(幅: 600、高さ: 400).AddTitle("従業員あたりの売上").AddSeries("デフォルト", chartType: "円",xValue: dataView, xField: "名前",yValues: dataView, yFields: "売上").Write();} }上記は、Chart ヘルパーの使用方法の概要です。