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

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

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

利用可能バージョン:.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」


Insider.NET フォーラム 新着記事
  • 第2回 簡潔なコーディングのために (2017/7/26)
     ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回 Visual Studio Codeデバッグの基礎知識 (2017/7/21)
     Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回 明瞭なコーディングのために (2017/7/19)
     C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator (2017/7/18)
     Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

注目のテーマ

Insider.NET 記事ランキング

本日 月間
ソリューションFLASH