.NET TIPS

[ASP.NET]チャート・コントロールに凡例を追加するには?[3.5、C#、VB]

山田 祥寛
2010/04/15

 チャート・コントロールでは、凡例も簡単に追加できる。凡例とは、データ項目のタイトルをチャート本体とは別に表したボックスのこと。シンプルなチャート画像の場合は、チャート本体に埋め込まれた項目名でも十分かもしれない。しかし、項目数が多い場合、あるいは、チャート自体が複雑である場合には、凡例として外部化した方が見やすいだろう。

 例えば、以下は「TIPS:[ASP.NET]チャート・コントロールで円グラフ/ドーナツ・グラフを作成するには?」で作成したドーナツ・グラフである(スライス機能を無効にした場合)。値の大きな項目については問題ないが、小さい値の項目は互いに重なり合って見えなくなってしまう。

項目名がつぶれて見えない例

 このようなケースでは、以下のように凡例を利用するべきである。

ドーナツ・グラフに対して凡例を追加した結果

 なお、本稿の手順は先述の「TIPS:[ASP.NET]チャート・コントロールで円グラフ/ドーナツ・グラフを作成するには?」でドーナツ・グラフが完成していることを前提に手順を進めている。ドーナツ・グラフを作成する方法そのものについては、別稿の解説を参照していただきたい。

1. 凡例を追加する

 チャート・コントロールに凡例を追加するには、プロパティ・ウィンドウからLegendsプロパティ右端の[...]ボタンをクリックする。

[Legend コレクション エディタ]ダイアログ

 上の画面のような[Legend コレクション エディタ]ダイアログが開くので、左の[メンバ]欄からLegendオブジェクト(Legend1)を追加したうえで、以下の表の要領でプロパティ情報を設定する。

プロパティ 概要 設定値
DockedToChartArea 凡例を関連付けるチャート・エリア ChartArea1
Docking 凡例の表示位置 Right
ShadowOffset 影のオフセット 10
Title 凡例のタイトル 店舗名
TitleSeparator タイトルとの区切り線 DashLine
BackColor 背景色 128, 128, 255
BackGradientStyle グラデーションのスタイル TopBottom
BorderColor 枠線の色 Black
Legendオブジェクトのプロパティ設定

 凡例を表示させるだけなら、DockedToChartArea/Dockingプロパティで凡例を関連付けるチャート・エリアと表示位置を指定すればよい。表示位置を自分で指定したいならば、Positionプロパティに表示位置(X/Yサブ・プロパティ)、大きさ(Height/Widthサブ・プロパティ)を設定してもよいが、多くの場合は、チャート・コントロールによる自動設定に委ねた方が無難だろう。

2. Seriesオブジェクトの設定を編集する

 凡例の追加に伴い、Seriesオブジェクト(個々の系列)の設定についても変更しておこう。Seriesオブジェクトの設定を変更するには、プロパティ・ウィンドウからSeriesプロパティ右端の[...]ボタンをクリックする。

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

 上の画面のような[Series コレクション エディタ]ダイアログが開くので、すでに用意されているであろうSeries1(Seriesオブジェクト)に対して、右のプロパティ・シートからプロパティ情報を設定しておこう。

プロパティ 設定値
CustomProperties-CollectedLegentText
CustomProperties-PieLabelStyle Disabled
LegendText #VALX #PERCENT
Seriesオブジェクトのプロパティ設定

 CustomPropertiesプロパティは、チャート型に応じたさまざまなパラメータ情報を設定するためのプロパティである。そのサブ・プロパティであるPieLabelStyleプロパティにDisabledを設定することで、グラフ上の項目表示を無効にできる。凡例を有効にした場合には、見た目に応じて項目表示は無効にしても差し支えないだろう。

 CustomProperties-CollectedLegentTextサブ・プロパティは、スライス項目を有効にした場合の凡例への表示テキストを表す。似たプロパティとしてCollectedLabelサブ・プロパティもあるが、こちらはグラフ内に表示する項目名を表すものであるので、混同しないように注意されたい。

 LegendTextプロパティは、凡例への表示テキストの書式を表すものだ。凡例にはデフォルトで項目名が表示されるが、その内容を変更したい場合には、このプロパティ値を変更すればよい。LegendTextプロパティを編集するには、プロパティ・シートの項目右端から[...]ボタンをクリックすればよい。

[文字列キーワード エディタ]ダイアログ

 上の画面のような[文字列キーワード エディタ]ダイアログが開くので、[新しいキーワードの挿入]ボタンをクリックする。

[キーワード エディタ]ダイアログ

 [キーワード エディタ]ダイアログが開くので、ここでは[キーワード]欄から「X値」「合計に対する比率で表したY値」を順に追加する。挿入する値の書式は、ダイアログ右側の[値の書式]欄から指定できる。ここでは「合計に対する比率で表したY値」について、書式を「パーセント」、有効桁数を「1」としておこう。

 [文字列キーワード エディタ]ダイアログに戻り、最終的に「#VALX #PERCENT{P1}」のような書式文字列が編集できていれば成功である。これで「川崎 21.9%」のような表示が凡例に表示されるようになる。書式文字列を覚えていれば、LegendTextプロパティを直接編集しても構わないが、まずは[文字列キーワード エディタ]ダイアログを利用した方が間違いも少ないだろう。

 以上を理解できたら、サンプルを実行してみよう。冒頭の画面のようにドーナツ・グラフの右側に凡例が表示されていることを確認してほしい。End of Article

利用可能バージョン:.NET Framework 3.5
カテゴリ:Webフォーム 処理対象:Chartコントロール
使用ライブラリ:Chartコントロール
関連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メールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Insider.NET 記事ランキング

本日 月間