.NET TIPS ［ASP.NET］チャート・コントロールで複合グラフを作成するには？［3.5、C#、VB］ 山田 祥寛 2010/03/25

　複合グラフとは、種類の異なるグラフを組み合わせたグラフのこと。複合グラフを利用することで、「単位や性質の異なる――しかし、互いに関連を持っているため、ひと目で確認したいような情報」を効果的に表現できる。

　例えば、以下は千葉の月別気温を折れ線グラフで、降雨量を棒グラフで、それぞれ表した例である。複合グラフを利用することで、このような情報も1つのグラフに集約できるわけだ。

千葉の月別平均気温／降雨量を複合グラフとして表した例

　ASP.NETのチャート・コントロールでは、このような複合グラフも、ごく簡易な手順で実装できる。それではさっそく、具体的な手順を見ていくことにしよう。

　なお、本稿のサンプルを動作させるには、「TIPS：［ASP.NET］チャート・コントロールを使うには？（環境設定）」で紹介した手順に従って、チャート・コントロールを利用可能な状態にしておく必要がある。

1. データベースを用意する

　チャート・コントロールから利用するためのデータをデータベースに用意しておこう。ここでは、以下のようなWeather（気候）テーブルを用意し、適当なデータを入力しておくものとする。

フィールド名	データ型	概要
area	CHAR(10)	エリアコード（主キー）
month	INT	月（主キー）
temperature	FLOAT	平均気温
rainfall	FLOAT	平均降雨量
Weatherテーブルのフィールド・レイアウト

　今回入力したデータ（例）は、以下のとおりである。本来であれば、複数の地域の情報を入力しておくべきところであるが、今回は簡単化のために千葉のデータのみを入力した。

area	month	temperature	rainfall
Chiba	1	9.5	78
Chiba	2	10.1	103.4
Chiba	3	13.9	109.3
Chiba	4	16.1	175.3
Chiba	5	18.7	184.7
Chiba	6	21.4	255.3
Chiba	7	26.3	215.6
Chiba	8	29.1	189.3
Chiba	9	27.5	250
Chiba	10	20.2	193.3
Chiba	11	15.5	174.9
Chiba	12	12.2	134.1
Weatherテーブルのデータ（例）

2. 新規のWebフォームを作成する

　新規のWebフォーム（Multi.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でチャート・コントロールを配置する。

Multi.aspxのフォーム・レイアウト

Chartコントロール（IDは「cht」）を配置する。

　チャート・コントロール右肩のタスク・メニューから［データ ソースの選択］−［<新しいデータソース>］を選択する。

データソース構成ウィザード

　上の画面のようなデータソース構成ウィザードが表示されるので、以下の表の要領で必要なデータを入力してほしい。データソース構成ウィザードに関する詳細は、「TIPS：［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？」が詳しいので、併せてご参照いただきたい。

項目	概要
データの種類	データベース
データソースID	sds
接続名	MyDB（Web.configでの登録名）
Selectステートメント	SELECT [area], [month], [temperature], [rainfall] FROM [Weather] WHERE ([area] = @area) ORDER BY [month]
データソース構成ウィザードの設定

　プレイスホルダである「@area」には、取りあえず固定値として「Chiba」をセットしておこう。この設定は［WHERE 句の追加］ダイアログから、以下のように必要な項目を定義することで行える（本来のアプリケーションであれば、パラメータ値は画面上からの選択／入力値などによって決まるはずである）。

［WHERE 句の追加］ダイアログ

3. チャート・コントロールのプロパティを設定する

　まずは、チャート・コントロール全体にかかわるプロパティからだ。チャート・コントロールには実に多くのプロパティと、それらに付随するサブ・プロパティが用意されているので、それぞれ順番に見ていくことにする。

（1）チャート・タイトルを設定する

　チャート・タイトルを定義するのは、Titlesプロパティの役割だ。プロパティ・ウィンドウからTitlesプロパティ右端の［...］ボタンをクリックする。

［Title コレクション エディタ］ダイアログ

　［Title コレクション エディタ］ダイアログが表示されるので、左下の［追加］ボタンからTitleオブジェクトを追加する。また、TitleオブジェクトのTextプロパティとして「千葉の気象」と入力しておこう。ダイアログを閉じたときに、チャートの上部にタイトルが追加されていることを確認してほしい。

（2）チャート・エリアを設定する

　チャート・エリアとは、実際のチャートを描画するための領域で、X／Y軸を表すAxisオブジェクトと、グラフそのものを表すSeriesオブジェクトを含む。チャート・コントロールの中に複数のチャート・エリアを設置することも可能だ（デフォルトは1つ）。

　チャート・エリアを設定するには、プロパティ・ウィンドウからChartAreasプロパティ右端の［...］ボタンをクリックする。

［ChartArea コレクション エディタ］ダイアログ

　［ChartArea コレクション エディタ］ダイアログでは、デフォルトのチャート・エリア（ChartArea1）が設置されていることが確認できるはずだ。ここではさらに、このAxes（軸）プロパティを設定する。右側のプロパティ・シートからAxesプロパティを選択し、右端の［...］ボタンをクリックする。

［Axis コレクション エディタ］ダイアログ

　軸を設定するための［Axis コレクション エディタ］ダイアログが開くので、左端の［メンバ］欄に以下のようなAxisオブジェクトがすでに用意されていることを確認してほしい。

メンバ名	概要	チャート・エリアでの表示場所
X axis	標準のX軸	下部
Y（Value） axis	標準のY軸	左端
Secondary X axis	予備のX軸	上部
Secondary Y（Value） axis	予備のY軸	右端
Axisオブジェクトの種類

　Axisオブジェクトは標準で用意されたものが固定で利用されるので、これを追加／削除することはできない。本稿ではSecondary X axisを除くAxisオブジェクトに対して、以下の要領でプロパティを設定しておこう。

オブジェクト	プロパティ	設定値
X axis	Title	月
	Maximum	12
	Minimum	1
Y（Value） axis	Title	平均気温
Secondary Y（Value） axis	Title	平均降雨量
Axisオブジェクトの設定

　X軸のMaximum／Minimumプロパティを明示していない場合、デフォルトでは0、13という値が両端に表示されてしまうので注意してほしい。

　以上の設定ができたら、［Axis コレクション エディタ］ダイアログ、［ChartArea コレクション エディタ］ダイアログの順でダイアログを閉じる。

（3）グラフを設定する

　最後に、グラフそのものの設定を行う。グラフの情報を管理するのはSeriesプロパティの役割だ。Seriesプロパティを設定するには、プロパティ・ウィンドウからSeriesプロパティ右端の［...］ボタンをクリックすればよい。

［Series コレクション エディタ］ダイアログ

　［Series コレクション エディタ］ダイアログが開き、まずはデフォルトで1つだけSeriesオブジェクト（Series1）が用意されていることを確認してほしい。

　本稿では複合グラフを作成したいので、ダイアログ左下の［追加］ボタンをクリックし、Seriesオブジェクト（Series2）を追加しておこう。また、それぞれのSeriesオブジェクトに対して、以下の要領でプロパティ値を設定しておく。

オブジェクト	プロパティ	設定値
Series1	ChartType	Column
	XValueMember	month
	YValueMembers	rainfall
	YAxisType	Secondary
Series2	ChartType	Line
	XValueMember	month
	YValueMembers	temprature
	BorderWidth	5
	IsValueShowAsLabel	True
Seriesオブジェクトの設定

　ChartTypeプロパティは、グラフの種類を表す。ここでは平均降雨量は棒グラフ（Column）で、平均気温は折れ線グラフ（Line）で、それぞれ描画するものとする。

　XValueMember／YValueMembersプロパティは、X／Y軸それぞれに対して割り当てるデータソース上のフィールド名を表す。いずれのSeriesオブジェクトでもX軸は共通してmonth（月）を割り当てている点に注目してほしい。

　XAxisType／YAxisTypeプロパティは、使用する軸（Axisオブジェクト）を表すものだ。デフォルトはPrimary（標準の軸）であるので、Secondary（予備の軸）を利用するSeries1オブジェクトのYAxisTypeプロパティのみを指定しておく。

　そして、IsValueShowAsLabelプロパティはグラフに実際の値を表すラベルを付与するかを決めるものだ。ここでは平均気温に対して、それぞれのポイントごとに数値を表示するものとする。

　以上で、複合グラフを作成するための手順は完了だ。いくつものサブ・プロパティに設定が分かれているため、少々複雑にも思われたかもしれないが、それぞれのオブジェクトの関係を理解していれば、手順そのものはごく定型的である。

　さっそく、サンプルを実行してみよう。冒頭の画面のように、平均気温と降雨量とが複合グラフとして描画できていれば成功である。

利用可能バージョン：.NET Framework 3.5 カテゴリ：Webフォーム　処理対象：Chartコントロール 使用ライブラリ：Chartコントロール 関連TIPS：［ASP.NET］チャート・コントロールを使うには？（環境設定） 関連TIPS：［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？

この記事と関連性の高い別の.NET TIPS ［ASP.NET］チャート・コントロールで折れ線グラフを作るには？ ［ASP.NET］チャート・コントロールで株価グラフを作るには？ ［ASP.NET］チャート・コントロールで棒グラフを作るには？ ［ASP.NET］チャート・コントロールで円グラフ／ドーナツ・グラフを作成するには？ ［ASP.NET］チャート・コントロールで積み上げ棒グラフを作成するには？ ［ASP.NET］チャート・コントロールでレンジ・チャートを作成するには？ ［ASP.NET］チャート・コントロールでレーダー・チャートを作るには？ このリストは、（株）デジタルアドバンテージが開発した 自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。 generated by

「.NET TIPS」

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）