著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマイクロソフトの見解を反映したものですマイクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワ

Size: px

Start display at page:

Download "著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマイクロソフトの見解を反映したものですマイクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワ"

さやうみのなか
5 years ago
Views:

1 Visual Studio Do-It-Yourself シリーズ第 16 回 Chart コントロール

2 著作権このドキュメントに記載されている情報はこのドキュメントの発行時点におけるマイクロソフトの見解を反映したものですマイクロソフトは市場の変化に対応する必要があるためこのドキュメントの内容に関する責任を問われないものとしますまた発行日以降に発表される情報の正確性を保証できませんこのホワイトペーパーは情報提供のみを目的としています明示黙示または法令に基づく規定に関わらずこれらの情報についてマイクロソフトはいかなる責任も負わないものとしますこの文書およびソフトウェアを使用する場合は適用されるすべての著作権関連の法律に従っていただくものとしますこのドキュメントのいかなる部分も米国 Microsoft Corporation の書面による許諾を受けることなくその目的を問わずどのような形態であっても複製または譲渡することは禁じられていますここでいう形態とは複写や記録など電子的なまたは物理的なすべての手段を含みますただしこれは著作権法上のお客様の権利を制限するものではありませんマイクロソフトはこの文書に記載されている事項に関して特許申請中特許商標著作権および他の知的財産権を所有する場合があります別途マイクロソフトのライセンス契約上に明示の規定のない限りこのドキュメントはこれらの特許商標著作権またはその他の知的財産権に関する権利をお客様に許諾するものではありません別途記載されていない場合このドキュメントで使用している会社組織製品ドメイン名電子メールアドレスロゴ人物場所出来事などの名称は架空のものです実在する商品名団体名個人名などとは一切関係ありません 2010 Microsoft Corporation. All rights reserved. Microsoft Windows Visual Studio Visual Studio ロゴは米国 Microsoft Corporation の米国およびその他の国における登録商標または商標です他のすべての商標はそれぞれの所有者の財産です

3 ASP.NET Do-It-Yourself 第 16 回は ASP.NET 4 で新たに追加されたサーバーコントロールである Chart コントロールについて学習します Chart コントロールを利用することで定型的なチャート画像を動的に生成できるようになります以下は Chart コントロールで対応している主なチャートの種類です棒グラフ( 積み上げ棒グラフ ) 円グラフ折れ線グラフ/ 階段グラフ / 曲線グラフレーダーチャート散布図/ バブルチャート株価チャートたとえば次の画面は Chart コントロールを利用してデータを棒グラフで表示している例です今回サンプルとして作成するアプリケーションの実行結果ですデータベースの準備 Chart コントロールはデータバインドコントロールの一種ですつまり GridView や ListView などのコントロールと同じくデータソースコントロールを経由することで限りなくコーディングレスでデータベース

などの内容をチャート化することができますそこで今回も第 5 回と同じくまずデータソースコントロールを準備した後 Chart コントロールを使ったサンプルを作成していきます利用するデータベースも第 5 回同様 Northwind データベースですあらかじめローカルマシンにセットアップした上で第 5 回の手順に従ってサーバーエクスプローラに Northwind

4 などの内容をチャート化することができますそこで今回も第 5 回と同じくまずデータソースコントロールを準備した後 Chart コントロールを使ったサンプルを作成していきます利用するデータベースも第 5 回同様 Northwind データベースですあらかじめローカルマシンにセットアップした上で第 5 回の手順に従ってサーバーエクスプローラに Northwind データベースへの接続を追加してくださいデータソースコントロールの準備 Chart コントロールとデータソースコントロールとを関連づける方法にはさまざまな方法があります具体的な手順については第 4 5 回でもいくつか示していますので合わせて参考にしてください今回はいくつかある手順の中で Chart コントロールのスマートタグ ( タスクメニュー ) からデータソースを関連づける手順について見ていきます既存のプロジェクトに対して新規に Chart.aspx という名前で Web フォームを作成したらこのページに Chart コントロールをドラッグ & ドロップします Chart コントロールはツールボックスの [ データ ] タブに含まれています Chart コントロールを配置するとコントロールの右肩にタスクメニューが表示されますので [ データソースの選択 :] から < 新しいデータソース...> を選択してください

$上の図のようなデータソース構成ウィザードが表示されますので以下の表に従って必要な情報を入力してくださいデータソース構成ウィザードの詳細については第 4 回の内容を参照してください項目設定値データの種類データソース ID データ接続の選択接続文字列の名前カスタムステートメントデータベース sds ( コンピュータ名 )\sqlexpress.northwind.$

5 上の図のようなデータソース構成ウィザードが表示されますので以下の表に従って必要な情報を入力してくださいデータソース構成ウィザードの詳細については第 4 回の内容を参照してください項目設定値データの種類データソース ID データ接続の選択接続文字列の名前カスタムステートメントデータベース sds ( コンピュータ名 )\sqlexpress.northwind.dbo NorthConnect SELECT CategoryID, AVG(UnitPrice) AS AvgPrice, MAX(UnitPrice) AS MaxPrice, MIN(UnitPrice) AS MinPrice FROM Products GROUP BY CategoryID 第 4 回ではごくシンプルな SELECT 命令を作成しただけでしたのでテーブルを直接に選択しましたが今回のような集計を伴うような命令は自分で SELECT 命令を記述する必要があります

上の画面でカスタム SQL ステートメントまたはストアドプロシージャを指定するを選択し [ 次へ ] ボタンをクリックすると以下のような [ カスタムステートメントまたはストアドプロシージャを定義する ] 画面が表示されます [SQL ステートメント ] 欄に表のような SELECT 命令を入力してくださいこの SELECT 命令は Products テーブルから CategoryID

6 上の画面でカスタム SQL ステートメントまたはストアドプロシージャを指定するを選択し [ 次へ ] ボタンをクリックすると以下のような [ カスタムステートメントまたはストアドプロシージャを定義する ] 画面が表示されます [SQL ステートメント ] 欄に表のような SELECT 命令を入力してくださいこの SELECT 命令は Products テーブルから CategoryID 列 ( 製品カテゴリ ) の単位にグループ化し UnitPrice 列 ( 単価 ) の平均最大値最小値を求めるという意味です ( 最大値最小値についてはあとから利用します ) 自分で一から SQL 命令をタイプしたくないという場合にはダイアログ右下から [ クエリビルダー...] ボタンをクリックすると以下の図のようなクエリビルダーが起動しますクエリビルダーを利用すると Access ライクな操作で SQL 命令をより直感的に作成できます

Chart の基本情報を設定する Chart コントロールにはさまざまなプロパティが用意されていますが最低限設定しなければいけない情報はチャートの種類と X Y 軸にバインドするデータメンバーですこれらの情報はプロパティウィンドウからも設定できますがタスクメニューを利用すればより手軽です Chart コントロールを選択し右肩の [>] アイコンをクリックすると

7 Chart の基本情報を設定する Chart コントロールにはさまざまなプロパティが用意されていますが最低限設定しなければいけない情報はチャートの種類と X Y 軸にバインドするデータメンバーですこれらの情報はプロパティウィンドウからも設定できますがタスクメニューを利用すればより手軽です Chart コントロールを選択し右肩の [>] アイコンをクリックするとタスクメニューが開きますのでそれぞれ以下のように必要な情報を設定してください項目設定値グラフの種類 Column( 棒グラフ ) X 値メンバー Y 値メンバー CategoryID AvgPrice これで Chart コントロールは分類 (CategoryID 列 ) を X 軸に平均単価 (AvgPrice 列 ) を Y 軸に割り当てた棒グラフを生成しますプロジェクトを実行すると冒頭の図のように Products テーブルの内容が棒グラフとして表示されることが確認できます

さまざまな種類のチャートを確認する先ほどのタスクメニューから [ グラフの種類 ] を変更することで表示するチャートの種類を自由に変更できますたとえば折れ線グラフを表示するならば [ グラフの種類 ] に "Line" を選択するだけです以下はその実行結果ですただしチャートによっては Y 軸に対して複数のメンバーをバインドする必要があるものもありますので注意してください

8 さまざまな種類のチャートを確認する先ほどのタスクメニューから [ グラフの種類 ] を変更することで表示するチャートの種類を自由に変更できますたとえば折れ線グラフを表示するならば [ グラフの種類 ] に "Line" を選択するだけです以下はその実行結果ですただしチャートによっては Y 軸に対して複数のメンバーをバインドする必要があるものもありますので注意してくださいたとえば範囲グラフ (Range) では範囲の上限下限を表すメンバーをあらかじめ決めておく必要がありますタスクメニューから以下の表のように値を変更してください項目設定値グラフの種類 Range( 範囲グラフ ) X 値メンバー CategoryID( 変更なし ) Y 値メンバー MaxPrice MinPrice 複数のメンバーを適用するチャートを選択した場合 [Y 値メンバー ] は以下の図のようにチェックボックスで複数のメンバーが選択できるようになります

9 この状態でサンプルを実行すると以下の図のように単価の上限下限をそれぞれの境界値として範囲グラフが確認できます

10 複合グラフを作成するひとつのチャートエリアに複数のチャートを描画することもできますこのようなチャートのことを複合グラフと言いますたとえば最初に作成した棒グラフに単価の最大値を表す折れ線グラフを追加してみましょうこれにはプロパティウィンドウから Series プロパティを選択しその右端の [...] ボタンをクリックします

11 表示された [Series コレクションエディター ] ダイアログは Chart コントロールの中でチャートそのもの ( 系列 ) を表す Series オブジェクトを設定するためのダイアログです既に "Series1" という名前で Series オブジェクトが存在しますがこれはタスクメニューから作成済みの棒グラフを表すものですチャートを追加するにはダイアログ左下の [ 追加 ] ボタンをクリックしてください "Series2" という名前の Series オブジェクトが追加されますので右のプロパティシートから以下の表のように必要な情報を入力してくださいプロパティ概要設定値 ChartType チャートの種類 Line XValueMember X 軸に関連付ける列 CategoryID YValueMembers Y 軸に関連付ける列 MaxPrice [Series コレクションエディター ] ダイアログを閉じてサンプルを実行してみましょう以下の図のように平均単価が棒グラフで最高価格が折れ線グラフでそれぞれひとつのチャートに表示されていることが確認できます

12 Chart コントロールのその他の設定その他チャートを描画する際に欠かせないタイトルや軸凡例についてそれぞれ基本的な設定の手順を見ておきましょうタイトルを追加するタイトルを追加するにはプロパティウィンドウから Titles プロパティを設定します

Titles プロパティ右端の [ ] ボタンをクリックすると [Title コレクションエディター ] ダイアログが起動しますのでダイアログ左下の [ 追加 ] ボタンで Title オブジェクトを追加した上でダイアログ右のプロパティシートから表の要領で必要な情報を入力してくださいプロパティ概要設定値 DockedToChartArea

13 Titles プロパティ右端の [ ] ボタンをクリックすると [Title コレクションエディター ] ダイアログが起動しますのでダイアログ左下の [ 追加 ] ボタンで Title オブジェクトを追加した上でダイアログ右のプロパティシートから表の要領で必要な情報を入力してくださいプロパティ概要設定値 DockedToChartArea 特定のチャート領域にタイトルをドッキングさせるか NotSet Docking タイトルの表示位置 (Position プロパティが Auto の場合のみ有効 ) Top Text タイトルを表すテキスト製品価格 Chart コントロールではひとつのコントロールでチャートの描画領域 ( チャートエリア ) を持つことができますデフォルトでタイトルは Chart コントロール全体のタイトルとして関連づけられますが DockedToChartArea プロパティを設定することで特定のチャートエリアにタイトルを関連付けることができます以下はそれぞれ DockedToChartArea プロパティを NotSet ( 未設定 ) に設定した場合 ( 左 ) ChartArea1 に設定した場合 ( 右 ) の結果です ChartArea1 は Chart コントロールにデフォルトで用意されているチャートエリアです

14 凡例を設定する凡例は Legends プロパティから設定できます Legends プロパティ右端の [ ] ボタンをクリックすると [Legend コレクションエディター ] ダイアログ

15 が起動しますのでダイアログ左下の [ 追加 ] ボタンで Legend1 という名前の Legend オブジェクトを追加しますこれでチャート画像に凡例が追加されましたしかしこの状態では凡例には意味のない Series1 Series2 のような名前が表示されているだけですので系列単位の名前を設定する必要がありますこれには先ほども利用した [Series コレクションエディター ] ダイアログから行います今ある Series オブジェクト Series1 Series2 の Name プロパティに対してそれぞれ平均価格最高価格と設定しますこれで凡例にも対応する系列の名前が表示されるようになります

16 軸を設定する軸を設定するにはプロパティウィンドウの ChartAreas プロパティ右端の [ ] ボタンから [ChartArea コレクションエディター ] ダイアログを開きます [ChartArea コレクションエディター ] ダイアログはチャートエリアに関する情報を設定するためのダイアログでたとえばチャートエリアの背景色や軸 3D 表示の設定などを行えます ( デフォルトでは ChartArea1 という名前でひとつだけチャートエリアが設定されているはずです )

17 ここでは軸の設定を行いたいのでダイアログ左から ChartArea1 を選択した状態で右のプロパティシートから Axes プロパティ右端の [ ] ボタンをクリックしてください

[Axis コレクションエディター ] ダイアログが開きますこのダイアログでは X axis Y (Value) axis という標準の X 軸 Y 軸と Secondary X axis Secondary Y axis という予備の X 軸 Y 軸が既に用意されています予備の X 軸 Y 軸は複合グラフで異なる単位のチャートを描画したい場合に利用するもので今回は使用しません

18 [Axis コレクションエディター ] ダイアログが開きますこのダイアログでは X axis Y (Value) axis という標準の X 軸 Y 軸と Secondary X axis Secondary Y axis という予備の X 軸 Y 軸が既に用意されています予備の X 軸 Y 軸は複合グラフで異なる単位のチャートを描画したい場合に利用するもので今回は使用しません今回は最低限標準の X 軸 Y 軸に対して以下のような設定を行っておきます Axis プロパティ設定値 X axis Title 製品分類 Y (Value) axis Title 価格 ScaleBreakStyle - (Enabled) True ScaleBreakStyle Enabled サブプロパティはスケール区切りを有効にするかどうかを決定しますこの機能を有効にすることで一部の値が大きい ( 小さい ) 場合にも軸の一部を省略できますので限られた描画領域を有効に利用できます以下が設定後の実行結果です

19 まとめ今回は ASP.NET 4 で追加された Chart コントロールの基本的な使い方について紹介しました Chart コントロールはとてもリッチなコントロールでもあり目的に応じて実にさまざまな表現を実装できます本稿の内容を手掛かりに自分でもあまたある Chart コントロールの諸機能に触れてみてください次回は QueryExtender コントロールについて学習します

Microsoft Word - Per-Site_ActiveX_Controls

Microsoft Word - Per-Site_ActiveX_Controls サイト別 ActiveX コントロール : Windows Internet Explorer 8 Beta 1 for Developers Web 作業の操作性を向上 2008 年 3 月詳細の問い合わせ先 ( 報道関係者専用 ): Rapid Response Team Waggener Edstrom Worldwide (503) 443 7070 rrt@waggeneredstrom.com