ASP.NET 学習ノートを共有する (9) WebPages チャート

ダイアグラム ヘルパー - 多くの便利な ASP.NET Web ヘルパーの 1 つ。

ダイアグラム ヘルパー

前の章では、ASP.NET の "ヘルパー" の使用方法を学習しました。

「WebGrid 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();
}

新しいチャート 新しいチャート オブジェクトを作成し、その幅と高さを設定します

- によって指定されます。 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 データベースを開きます (データベース オブジェクトを Variable db に割り当てます)

- var dbdata = db.Query はデータベース クエリを実行し、結果を dbdata に保存します

- 新しいチャートが新しいチャートを作成しますチャート オブジェクトを取得し、その幅と高さを設定します

- AddTitle メソッドはチャートのタイトルを指定します

- DataBindTable メソッドはデータ ソースをチャートにバインドします

- Write() メソッドはチャートを表示します

DataBindTable メソッドを使用する以外に、もう 1 つの方法は、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();}}

【関連する推奨事項】

1. ASP.NET の無料ビデオ チュートリアル

2. ASP.NET の学習ノートを共有します。 (1)--WebPages Razor

3.

ASP.NET 学習ノートの共有 (2)--WebPages の概要

4.

ASP.NET 学習ノートの共有

5. ASP.NET 学習ノートを共有する (4) フォルダー

6.

ASP.NET 学習ノートを共有する (5 ) グローバル ページ AppStart と PageStart

7. ASP.NET 学習ノートを共有する (8) WebPages Helper

以上がASP.NET 学習ノートを共有する (9) WebPages チャートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。