Latest web development tutorials
×

ASP.NET コース

ASP.NET コース ASP.NET 簡単な紹介

WP コース

WebPages 簡単な紹介 WebPages Razor WebPages レイアウト WebPages フォルダ WebPages 全体的な状況 WebPages フォーム WebPages オブジェクト WebPages ファイル WebPages ヘルパー WebPages WebGrid WebPages チャート WebPages Email WebPages PHP WebPages リリース WebPages 例

WP リファレンスマニュアル

WebPages カテゴリ WebPages セキュリティ WebPages データベース WebPages 郵便局 WebPages ヘルパー

ASP.NET Razor

Razor 簡単な紹介 Razor 文法 Razor C# 変数 Razor C# 循環 Razor C# ロジック Razor VB 変数 Razor VB 循環 Razor VB ロジック

ASP.NET MVC

MVC 簡単な紹介 MVC アプリケーション MVC フォルダ MVC レイアウト MVC コントローラ MVC ビュー MVC データベース MVC モデル MVC セキュリティ MVC HTML ヘルパー MVC リリース MVC リファレンスマニュアル

WF コース

WebForms 簡単な紹介 WebForms ページ WebForms コントロール WebForms イベント WebForms フォーム WebForms ViewState WebForms TextBox WebForms Button WebForms データバインディング WebForms ArrayList WebForms Hashtable WebForms SortedList WebForms XML ファイル WebForms Repeater WebForms DataList WebForms データベース接続 WebForms マスターページ WebForms ナビゲーション WebForms 例

WF リファレンスマニュアル

WebForms HTML WebForms Controls WebForms Validation

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ファイルを使用してグラフを作成することです:

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

実行中のインスタンス»