.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で生成されたコードを以下に掲載しておく。なお、コメント(<%--〜--%>)は筆者によるものである。

<asp:Chart ID="Chart1" runat="server" DataSourceID="sds" Width="530px">
  <%--凡例に関する設定--%>
  <Legends>
    <asp:Legend DockedToChartArea="ChartArea1" IsDockedInsideChartArea="False"
       Name="Legend1">
    </asp:Legend>
  </Legends>
  <%--個々の系列に関する設定--%>
  <Series>
    <asp:Series ChartArea="ChartArea1" ChartType="StackedColumn100"
      CustomProperties="DrawingStyle=Cylinder" IsValueShownAsLabel="True"
      Label="#PERCENT{P1}" Legend="Legend1" Name="三吉"
      XValueMember="month" YValueMembers="三吉">
    </asp:Series>
    <asp:Series ChartArea="ChartArea1" ChartType="StackedColumn100"
      CustomProperties="DrawingStyle=Cylinder" IsValueShownAsLabel="True"
      Label="#PERCENT{P1}" Legend="Legend1" Name="春日" XValueMember="month"
      YValueMembers="春日">
    </asp:Series>
    <asp:Series ChartArea="ChartArea1" ChartType="StackedColumn100"
      CustomProperties="DrawingStyle=Cylinder" IsValueShownAsLabel="True"
      Label="#PERCENT{P1}" Legend="Legend1" Name="東雲" XValueMember="month"
      YValueMembers="東雲">
    </asp:Series>
    <asp:Series ChartArea="ChartArea1" ChartType="StackedColumn100"
      CustomProperties="DrawingStyle=Cylinder" IsValueShownAsLabel="True"
      Label="#PERCENT{P1}" Legend="Legend1" Name="府中" XValueMember="month"
      YValueMembers="府中">
    </asp:Series>
    <asp:Series ChartArea="ChartArea1" ChartType="StackedColumn100"
      CustomProperties="DrawingStyle=Cylinder" IsValueShownAsLabel="True"
      Label="#PERCENT{P1}" Legend="Legend1" Name="広島" XValueMember="month"
      YValueMembers="広島">
    </asp:Series>
  </Series>
  <%--チャート・エリアに関する設定--%>
  <ChartAreas>
      <asp:ChartArea Name="ChartArea1"></asp:ChartArea>
  </ChartAreas>
</asp:Chart>
<%--チャート描画のためのデータを取得するデータソース・コントロール--%>
<asp:SqlDataSource ID="sds" runat="server"
  ConnectionString="<%$ ConnectionStrings:MyDB %>" SelectCommand="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"></asp:SqlDataSource>
出来上がったStack.aspxのコード

 それではさっそく、サンプルを実行してみよう。冒頭の画面のように、Shopテーブルの値に基づいて、100%積み上げ棒グラフが描画されればサンプルは正しく動作している。

 ちなみに、SeriesオブジェクトのChartTypeプロパティを変更することで、積み上げ棒グラフ(StackedColumn)、横方向の100%積み上げ棒グラフ(StackedBar100)、100%積み上げ面グラフ(StackedArea100)なども表現できる。

積み上げ棒グラフ(StackedColumn)

横方向の100%積み上げ棒グラフ(StackedBar100)

100%積み上げ面グラフ(StackedArea100)

 (100%なしの)積み上げ棒グラフは、構成比とともに各要素の絶対値も表現したい場合に利用できる表現である。また、100%積み上げ面グラフは構成比を表現するという目的は棒グラフと同様であるが、比率の変化をより強調したい場合に利用するとよいだろう。End of Article

利用可能バージョン:.NET Framework 3.5
カテゴリ:Webフォーム 処理対象:Chartコントロール
使用ライブラリ:Chartコントロール
関連TIPS:[ASP.NET]チャート・コントロールを使うには?(環境設定)
関連TIPS:[ASP.NET]GridViewコントロールでデータソースの内容を表示するには?
関連TIPS:[ASP.NET]チャート・コントロールに凡例を追加するには?

この記事と関連性の高い別の.NET TIPS
[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