.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」 |
- 第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用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
|
|