.NET TIPS ［ASP.NET］チャート・コントロールで積み上げ棒グラフを作成するには？［3.5、C#、VB］山田 祥寛2010/04/22 |
 |
チャート・コントロールは、ASP.NET、Windowsフォーム双方で利用できるチャート描画のためのコントロールである。チャート・コントロールを利用することで、円グラフ、棒グラフ、折れ線グラフ、レーダー・チャート、バブル・チャートなどなど、おおよそ日常的な業務でよく利用すると思われるチャートであれば、ごく直感的な手順で作成できる。本稿では、チャート・コントロールが対応するチャートの中でも、「100％積み上げ棒グラフ」（StackedColumn）を作成する方法について解説する。
100％積み上げ棒グラフは、ある項目の構成比（内訳）を表現するのに適したチャートである。よく似た用途を持つチャートとして、円グラフ／ドーナツ・グラフもあるが、円グラフが基本的に1つの項目しか表現できないのに対して、100％積み上げ棒グラフは複数の項目を並べて表示できるという特長がある。
本稿では、この100％積み上げ棒グラフを利用する例として、月別の店舗売上割合をグラフ化してみよう。以下は、本稿で作成するサンプルの実行例である。
 |
| チャート・コントロールで作成した100％積み上げ棒グラフ |
それぞれの店舗別の月別売上比（1〜6月）を100％積み上げ棒グラフで表現している。
それではさっそく、具体的な手順を見ていくことにしよう。なお、本稿のサンプルを動作させるには、「TIPS：［ASP.NET］チャート・コントロールを使うには？（環境設定）」で紹介した手順に従って、チャート・コントロールを利用可能な状態にしておく必要がある。
1. データベースを用意する
チャート・コントロールから利用するための元データをデータベースに用意しておこう。ここでは、以下のようなShop（店舗別月売上）テーブルを用意し、適当なデータを入力しておくものとする。
| フィールド名 | データ型 | 概要 |
| name | NVARCHAR(10) | 店舗名（主キー） |
| month | INT | 月 |
| sales | INT | 売り上げ金額 |
 |
||
| Shop（店舗月別売上）テーブルのフィールド・レイアウト | ||
今回入力したデータ（例）は、次のとおりである。
| name | month | sales |
| 広島 | 1 | 3219 |
| 広島 | 2 | 3842 |
| 広島 | 3 | 5800 |
| 広島 | 4 | 4678 |
| 広島 | 5 | 5036 |
| 広島 | 6 | 5012 |
| 三吉 | 1 | 5122 |
| 三吉 | 2 | 5025 |
| 三吉 | 3 | 4689 |
| 三吉 | 4 | 4126 |
| 三吉 | 5 | 3800 |
| 三吉 | 6 | 5126 |
| 春日 | 1 | 5790 |
| 春日 | 2 | 2150 |
| 春日 | 3 | 4900 |
| 春日 | 4 | 1500 |
| 春日 | 5 | 6700 |
| 春日 | 6 | 4214 |
| 東雲 | 1 | 5568 |
| 東雲 | 2 | 4812 |
| 東雲 | 3 | 5179 |
| 東雲 | 4 | 5121 |
| 東雲 | 5 | 5023 |
| 東雲 | 6 | 5462 |
| 府中 | 1 | 7601 |
| 府中 | 2 | 3267 |
| 府中 | 3 | 5790 |
| 府中 | 4 | 4896 |
| 府中 | 5 | 5900 |
| 府中 | 6 | 4957 |
|
||
| Shopテーブルのデータ（例） | ||
2. 新規のWebフォームを作成する
新規のWebフォーム（Stacked.aspx）を作成したら、フォーム・デザイナから以下の画面の要領でチャート・コントロールを配置する。
 |
| Stacked.aspxのフォーム・レイアウト |
| Chartコントロール（IDは「cht」）を配置する。 |
チャート・コントロールの右肩に［Chart タスク］メニューが表示されるので、ここから［データ ソースの選択］−［<新しいデータソース>］を選択する。
すると、データソース構成ウィザードが表示されるので、以下の表の要領で必要なデータを入力してほしい。データソース構成ウィザードに関する詳細は、「TIPS：［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？」が詳しいので、併せて参照いただきたい。
| 項目 | 概要 |
| データの種類 | データベース |
| データソースID | sds |
| 接続名 | MyDB（Web.configでの登録名） |
| Selectステートメント | SELECT month, SUM (CASE WHEN name = '三吉' THEN sales ELSE 0 END) AS 三吉, SUM (CASE WHEN name = '春日' THEN sales ELSE 0 END) AS 春日, SUM (CASE WHEN name = '東雲' THEN sales ELSE 0 END) AS 東雲, SUM (CASE WHEN name = '府中' THEN sales ELSE 0 END) AS 府中, SUM (CASE WHEN name = '広島' THEN sales ELSE 0 END) AS 広島 FROM shop GROUP BY month ORDER BY month |
|
|
| データソース構成ウィザードの設定 | |
SELECT命令の詳細については本稿の領分ではないので割愛する。ここでは、このSELECT命令によって以下のような結果セットを得ているということだけを理解しておこう。100％積み上げ棒グラフを生成するには、このように、1つの棒グラフが1レコードに対応するように、結果セットを整形する必要がある。
| month | 三吉 | 春日 | 東雲 | 府中 | 広島 |
| 1 | 5122 | 5790 | 5568 | 7601 | 3219 |
| 2 | 5025 | 2150 | 4812 | 3267 | 3842 |
| 3 | 4689 | 4900 | 5179 | 5790 | 5800 |
| 4 | 4126 | 1500 | 5121 | 4896 | 4678 |
| 5 | 3800 | 6700 | 5023 | 5900 | 5036 |
| 6 | 5126 | 4214 | 5462 | 4957 | 5012 |
|
|||||
| SELECT命令によって得られる結果セット | |||||
3. Chartコントロールのプロパティを設定する
個々のチャートにかかわる設定を行うのは、Seriesプロパティの役割だ。プロパティ・ウィンドウからSeriesプロパティ右端の［...］ボタンをクリックする。
 |
| ［Series コレクション エディタ］ダイアログ |
上の画面のような［Series コレクション エディタ］ダイアログが開くので、ダイアログ左の［メンバ］欄に積み上げるべき項目の数だけSeriesオブジェクトを追加する（ここでは三吉、春日、東雲、府中、広島を表す5つのSeriesオブジェクトが必要）。また、それぞれのSeriesオブジェクトに対しては、以下の表の要領でプロパティ情報を設定しておく。
| プロパティ | 概要 | Series1 | Series2 | Series3 | Series4 | Series5 |
| Name | 三吉 | 春日 | 東雲 | 府中 | 広島 | |
| ChartType | チャートの種類 | StackedColumn100 | ||||
| CustomProperties-DrawingStyle | 描画スタイル | Cylinder | ||||
| IsValueShownAsLabel | ラベルを表示するか | True | ||||
| Label | ラベルに表示する内容 | #PERCENT{P1} | ||||
| XValueMember | X軸に割り当てる値（列名） | month | ||||
| YValueMembers | Y軸に割り当てる値（列名） | 三吉 | 春日 | 東雲 | 府中 | 広島 |
|
||||||
| Seriesオブジェクトのプロパティ設定 | ||||||
100％積み上げ棒グラフを作成する場合には、棒グラフに積み上げたい項目の数だけSeriesオブジェクトを用意する必要がある点に注目だ。系列名を表すNameプロパティと、割り当てるメンバを識別するためのYValueMembersプロパティを除いては、ほとんど設定値は同じなので、ダイアログ上で1つだけSeriesオブジェクトを設定したら、あとはコード・エディタからコピー＆ペーストして、必要な情報だけを編集した方が手っ取り早いかもしれない。
| ［参考］積み上げグラフのグループ設定について |
チャート・コントロールは、デフォルトで「ChartType="StackedColumn100"」であるSeriesオブジェクトを1つの積み上げグラフとしてまとめるが、時として、複数に分けたいこともあるだろう。そのような場合は、CustomPropertiesプロパティのStackedGroupNameサブ・プロパティ（グループ名）を設定すればよい。 StackedGroupNameサブ・プロパティを設定することで、グループ名が等しいSeriesオブジェクト同士が1つの積み上げグラフとしてまとめられることになる。 |
4. 凡例を追加する
チャート・コントロールに凡例を追加するには、プロパティ・ウィンドウからLegendsプロパティ右端の［...］ボタンをクリックする。
 |
| ［Legendコレクション エディタ］ダイアログ |
［Legend コレクション エディタ］ダイアログが開くので、左の［メンバ］欄からLegendオブジェクト（Legend1）を追加したうえで、以下の表の要領でプロパティ情報を設定する。
| プロパティ | 概要 | 設定値 |
| DockedToChartArea | 凡例を関連付けるチャート・エリア | ChartArea1 |
| IsDockedInsideChartArea | 凡例をグラフ領域内に埋め込むか | False |
|
||
| Legendオブジェクトのプロパティ設定 | ||
これによって、SeriesオブジェクトのNameプロパティで設定されたテキストが凡例として表示されるようになる。凡例に関する詳細は、「TIPS：［ASP.NET］チャート・コントロールに凡例を追加するには？」で解説しているので、併せて参照していただきたい。
以上で、一連の手順は完了である。やや手順も込み入っていたので、参考までにVisual Studioで生成されたコードを以下に掲載しておく。なお、コメント（<%--〜--%>）は筆者によるものである。
|
|
| 出来上がったStack.aspxのコード |
それではさっそく、サンプルを実行してみよう。冒頭の画面のように、Shopテーブルの値に基づいて、100％積み上げ棒グラフが描画されればサンプルは正しく動作している。
ちなみに、SeriesオブジェクトのChartTypeプロパティを変更することで、積み上げ棒グラフ（StackedColumn）、横方向の100％積み上げ棒グラフ（StackedBar100）、100％積み上げ面グラフ（StackedArea100）なども表現できる。
 |
| 積み上げ棒グラフ（StackedColumn） |
 |
| 横方向の100％積み上げ棒グラフ（StackedBar100） |
 |
| 100％積み上げ面グラフ（StackedArea100） |
（100％なしの）積み上げ棒グラフは、構成比とともに各要素の絶対値も表現したい場合に利用できる表現である。また、100％積み上げ面グラフは構成比を表現するという目的は棒グラフと同様であるが、比率の変化をより強調したい場合に利用するとよいだろう。
| 利用可能バージョン：.NET Framework 3.5 カテゴリ：Webフォーム 処理対象：Chartコントロール 使用ライブラリ：Chartコントロール 関連TIPS：［ASP.NET］チャート・コントロールを使うには？（環境設定） 関連TIPS：［ASP.NET］GridViewコントロールでデータソースの内容を表示するには？ 関連TIPS：［ASP.NET］チャート・コントロールに凡例を追加するには？ |
 |
「.NET TIPS」 |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
 |
|
|
|
|
