.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プロパティを直接編集しても構わないが、まずは［文字列キーワード エディタ］ダイアログを利用した方が間違いも少ないだろう。

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

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

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