ASP.NET Web ページ - チャート ヘルパー

チャート ヘルパー - 多くの便利な 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();
}

- 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 データに基づいてグラフを作成する

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