Comments
Transcript
Visual Studio Do-It-Yourself シリーズ 第 16 回 Chart
Visual Studio Do-It-Yourself シリーズ 第 16 回 Chart コントロール 著作権 このドキュメントに記載されている情報は、このドキュメントの発行時点におけるマイクロソフトの見解を反映 したものです。マイクロソフトは市場の変化に対応する必要があるため、このドキュメントの内容に関する責任 を問われないものとします。また、発行日以降に発表される情報の正確性を保証できません。 このホワイトペーパーは情報提供のみを目的としています。明示、黙示、または法令に基づく規定に関わらず、 これらの情報についてマイクロソフトはいかなる責任も負わないものとします。 この文書およびソフトウェアを使用する場合は、適用されるすべての著作権関連の法律に従っていただくものと します。このドキュメントのいかなる部分も、米国 Microsoft Corporation の書面による許諾を受けることな く、その目的を問わず、どのような形態であっても、複製または譲渡することは禁じられています。ここでいう 形態とは、複写や記録など、電子的な、または物理的なすべての手段を含みます。ただしこれは、著作権法上の お客様の権利を制限するものではありません。 マイクロソフトは、この文書に記載されている事項に関して、特許、申請中特許、商標、著作権、および他の知 的財産権を所有する場合があります。別途マイクロソフトのライセンス契約上に明示の規定のない限り、このド キュメントはこれらの特許、商標、著作権、またはその他の知的財産権に関する権利をお客様に許諾するもので はありません。 別途記載されていない場合、このドキュメントで使用している会社、組織、製品、ドメイン名、電子メール ア ドレス、ロゴ、人物、場所、出来事などの名称は架空のものです。実在する商品名、団体名、個人名などとは一 切関係ありません。 © 2010 Microsoft Corporation. All rights reserved. Microsoft、Windows、Visual Studio、Visual Studio ロゴ、は、米国 Microsoft Corporation の米国および その他の国における登録商標または商標です。他のすべての商標は、それぞれの所有者の財産です。 ASP.NET Do-It-Yourself 第 16 回は、ASP.NET 4 で新たに追加されたサーバー コントロールである Chart コ ントロールについて学習します。Chart コントロールを利用することで、定型的なチャート画像を動的に生成で きるようになります。以下は、Chart コントロールで対応している主なチャートの種類です。 ・棒グラフ（積み上げ棒グラフ） ・円グラフ ・折れ線グラフ／階段グラフ／曲線グラフ ・レーダーチャート ・散布図／バブルチャート ・株価チャート たとえば次の画面は Chart コントロールを利用して、データを棒グラフで表示している例です。今回、サンプ ルとして作成するアプリケーションの実行結果です。 ■データ ベースの準備 Chart コントロールはデータ バインド コントロールの一種です。つまり、GridView や ListView などのコン トロールと同じく、データ ソース コントロールを経由することで、限りなくコーディングレスでデータベース などの内容をチャート化することができます。 そこで今回も、第 5 回と同じく、まずデータ ソース コントロールを準備した後、Chart コントロールを使っ たサンプルを作成していきます。利用するデータベースも、第 5 回同様、Northwind データベースです。あら かじめローカルマシンにセットアップした上で、第 5 回の手順に従って、サーバー エクスプローラに Northwind データベースへの接続を追加してください。 ■データ ソース コントロールの準備 Chart コントロールとデータ ソース コントロールとを関連づける方法には、さまざまな方法があります。具体 的な手順については、第 4、5 回でもいくつか示していますので、合わせて参考にしてください。今回は、いく つかある手順の中で、Chart コントロールのスマート タグ (タスク メニュー) からデータ ソースを関連づけ る手順について見ていきます。 既存のプロジェクトに対して、新規に Chart.aspx という名前で Web フォームを作成したら、このページに Chart コントロールをドラッグ＆ドロップします。Chart コントロールは、ツール ボックスの [データ] タブ に含まれています。 Chart コントロールを配置すると、コントロールの右肩にタスク メニューが表示されますので、[データ ソー スの選択：] から <新しいデータソース...> を選択してください。 上の図のようなデータ ソース構成ウィザードが表示されますので、以下の表に従って、必要な情報を入力して ください。データ ソース構成ウィザードの詳細については、第 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 列 (製品カテゴリ) の単位にグループ化し、UnitPrice 列 (単価) の平均、最大値、最小値を求める、という意味です (最大値、最小値については、あとから利用します)。 自分で一から SQL 命令をタイプしたくないという場合には、ダイアログ右下から [クエリ ビルダー...] ボタ ンをクリックすると、以下の図のようなクエリ ビルダーが起動します。クエリ ビルダーを利用すると、Access ライクな操作で SQL 命令をより直感的に作成できます。 ■Chart の基本情報を設定する Chart コントロールにはさまざまなプロパティが用意されていますが、最低限設定しなければいけない情報は、 チャートの種類と、X、Y 軸にバインドするデータ メンバーです。これらの情報はプロパティ ウィンドウから も設定できますが、タスク メニューを利用すれば、より手軽です。 Chart コントロールを選択し、右肩の [>] アイコンをクリックすると、タスク メニューが開きますので、そ れぞれ以下のように必要な情報を設定してください。 項目 設定値 グラフの種類 Column（棒グラフ） X 値メンバー CategoryID Y 値メンバー AvgPrice これで、Chart コントロールは分類 (CategoryID 列) を X 軸に、平均単価 (AvgPrice 列) を Y 軸に割り当 てた棒グラフを生成します。プロジェクトを実行すると、冒頭の図のように、Products テーブルの内容が棒グ ラフとして表示されることが確認できます。 ■さまざまな種類のチャートを確認する 先ほどのタスク メニューから [グラフの種類] を変更することで、表示するチャートの種類を自由に変更でき ます。たとえば、折れ線グラフを表示するならば、 [グラフの種類] に "Line" を選択するだけです。以下は、 その実行結果です。 ただし、チャートによっては Y 軸に対して複数のメンバーをバインドする必要があるものもありますので、注 意してください。たとえば、範囲グラフ (Range) では、範囲の上限、下限を表すメンバーをあらかじめ決めて おく必要があります。タスク メニューから、以下の表のように値を変更してください。 項目 設定値 グラフの種類 Range（範囲グラフ） X 値メンバー CategoryID（※変更なし） Y 値メンバー MaxPrice、MinPrice 複数のメンバーを適用するチャートを選択した場合、[Y 値メンバー] は以下の図のようにチェック ボックスで 複数のメンバーが選択できるようになります。 この状態でサンプルを実行すると、以下の図のように単価の上限、下限をそれぞれの境界値として範囲グラフが 確認できます。 ■複合グラフを作成する ひとつのチャート エリアに複数のチャートを描画することもできます。このようなチャートのことを複合グラ フと言います。 たとえば、最初に作成した棒グラフに、単価の最大値を表す折れ線グラフを追加してみましょう。これには、プ ロパティ ウィンドウから Series プロパティを選択し、その右端の [...] ボタンをクリックします。 表示された [Series コレクション エディター] ダイアログは、Chart コントロールの中でチャートそのもの (系列) を表す Series オブジェクトを設定するためのダイアログです。既に "Series1" という名前で Series オブジェクトが存在しますが、これはタスク メニューから作成済みの棒グラフを表すものです。 チャートを追加するには、ダイアログ左下の [追加] ボタンをクリックしてください。"Series2" という名前の Series オブジェクトが追加されますので、右のプロパティ シートから以下の表のように必要な情報を入力して ください。 プロパティ 概要 設定値 ChartType チャートの種類 Line XValueMember X 軸に関連付ける列 CategoryID YValueMembers Y 軸に関連付ける列 MaxPrice [Series コレクション エディター] ダイアログを閉じて、サンプルを実行してみましょう。以下の図のように平 均単価が棒グラフで、最高価格が折れ線グラフで、それぞれひとつのチャートに表示されていることが確認でき ます。 ■Chart コントロールのその他の設定 その他、チャートを描画する際に欠かせないタイトルや軸、凡例について、それぞれ基本的な設定の手順を見て おきましょう。 ●タイトルを追加する タイトルを追加するには、プロパティ ウィンドウから Titles プロパティを設定します。 Titles プロパティ右端の […] ボタンをクリックすると、[Title コレクション エディター] ダイアログが起動 しますので、ダイアログ左下の [追加] ボタンで Title オブジェクトを追加した上で、ダイアログ右のプロパテ ィ シートから表の要領で必要な情報を入力してください。 プロパティ 概要 設定値 DockedToChartArea 特定のチャート領域にタイトルをドッキングさせるか NotSet Docking タイトルの表示位置（Position プロパティが Auto の場合のみ有効） Top Text タイトルを表すテキスト 製品価格 Chart コントロールでは、ひとつのコントロールでチャートの描画領域（チャート エリア）を持つことができ ま す 。 デ フ ォ ル ト で タ イ ト ル は Chart コ ン ト ロ ー ル 全 体 の タ イ ト ル と し て 関 連 づ け ら れ ま す が 、 DockedToChartArea プロパティを設定することで、特定のチャート エリアにタイトルを関連付けることがで きます。以下は、それぞれ DockedToChartArea プロパティを NotSet (未設定) に設定した場合 (左)、 ChartArea1 に設定した場合 (右) の結果です。ChartArea1 は、Chart コントロールにデフォルトで用意され ているチャート エリアです。 ●凡例を設定する 凡例は、Legends プロパティから設定できます。 Legends プロパティ右端の […] ボタンをクリックすると、[Legend コレクション エディター] ダイアログ が起動しますので、ダイアログ左下の [追加] ボタンで Legend1 という名前の Legend オブジェクトを追加 します。これでチャート画像に凡例が追加されました。 しかし、この状態では凡例には意味のない Series1、Series2 のような名前が表示されているだけですので、系 列単位の名前を設定する必要があります。これには、先ほども利用した [Series コレクション エディター] ダ イアログから行います。今ある Series オブジェクト Series1、Series2 の Name プロパティに対して、それ ぞれ「平均価格」 「最高価格」と設定します。 これで凡例にも対応する系列の名前が表示されるようになります。 ●軸を設定する 軸を設定するには、プロパティ ウィンドウの ChartAreas プロパティ右端の […] ボタンから [ChartArea コ レクション エディター] ダイアログを開きます。[ChartArea コレクション エディター] ダイアログは、チャ ート エリアに関する情報を設定するためのダイアログで、たとえばチャート エリアの背景色や軸、3D 表示の 設定などを行えます (デフォルトでは ChartArea1 という名前で、ひとつだけチャート エリアが設定されてい るはずです)。 ここでは軸の設定を行いたいので、 ダイアログ左から ChartArea1 を選択した状態で、右のプロパティ シー トから Axes プロパティ右端の […] ボタンをクリックしてください。 [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 サブプロパティは、スケール区切りを有効にするかどうかを決定します。この機 能を有効にすることで、一部の値が大きい (小さい) 場合にも軸の一部を省略できますので、限られた描画領域 を有効に利用できます。以下が、設定後の実行結果です。 ■まとめ 今回は、ASP.NET 4 で追加された Chart コントロールの基本的な使い方について紹介しました。Chart コント ロールはとてもリッチなコントロールでもあり、目的に応じて、実にさまざまな表現を実装できます。本稿の内 容を手掛かりに、自分でもあまたある Chart コントロールの諸機能に触れてみてください。 次回は QueryExtender コントロールについて学習します。