.NET TIPS

[ASP.NET]チャート・コントロールでツールチップを表示するには?[3.5、4、C#、VB]

山田 祥寛
2010/06/03

 チャート・コントロールでは、個々のグラフ(データ・ラベル)に対して、ツールチップを追加することもできる。ツールチップとは、グラフの対応する個所にマウス・ポインタを置いた場合に、ポップアップされる小さなテキストのことである。チャートそのもので表現できる情報にはそれなりに制限もあるが、ツールチップを利用することで、補足的な情報をチャートに付与することができるだろう。

 以下は、チャート・コントロールで作成した散布図で、それぞれのデータ・ポイントに対応する値情報をツールチップとして追加した例である。

散布図で表示されているデータ・ラベルにマウス・ポインタを置くと、対応する値を表示

 それではさっそく、具体的な実装の手順を見ていこう。なお、本稿では、「TIPS:[ASP.NET]チャート・コントロールで散布図やバブル・チャートを作成するには?」で作成した散布図(Point.aspx)を基に、ツールチップを実装する手順についてのみ紹介する。散布図そのものの作成については前述のTIPSを併せて参照していただきたい。

●ツールチップの基本

 ツールチップを表示するには、Series(系列)オブジェクトに対して以下の表の要領でプロパティ情報を追加すればよい。Seriesオブジェクトを設定するには、プロパティ・ウィンドウからSeriesプロパティ右端の[...]ボタンをクリックする。

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

 上の画面のような[Series コレクション エディタ]ダイアログが開くので、すでに用意されているSeries1(Seriesオブジェクト)に対して、LabelToolTipプロパティを「#VALX{N0}」のように追加する。

 「#XXX{XX}」はツールチップに動的に埋め込まれる値や書式を表す書式文字列である(Visual Studio上では「キーワード」という用語が用いられている)。例えば「#VALX{N0}」であれば、

X軸の値(#VALX)を有効数字0けたの数値({N0})

を意味する(つまり、小数点以下は表示しない)。

 このような書式文字列は、直接にプロパティ・シートから編集しても構わないが、目的のキーワードを覚えるのは大変なので、専用のキーワード・エディタを利用すると便利だろう。

 キーワード・エディタを起動するには、プロパティ・シートのLabelToolTipプロパティ右端から[...]ボタンをクリックすればよい。

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

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

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

 [キーワード エディタ]ダイアログが開くので、ここでは[キーワード]欄から「X 値」を追加しよう。挿入する値の書式は、ダイアログ右側の[値の書式]欄から指定できる。ここでは[書式]を「数値」、[有効桁数]を「0」としておく。

 [文字列キーワード エディタ]ダイアログに戻り、最終的に「#VALX{N0}」のような書式文字列が編集できていれば成功である*1。これでX軸(ページ・ビュー)の値に応じて「6,439」のようなツールチップが表示されるようになる。

*1 ちなみに、既存のキーワードを編集するには、[文字列キーワード エディタ]ダイアログで対象のキーワードを選択した状態で、[キーワードの編集]ボタンをクリックすればよい。

X軸の値がツールチップに反映される

●ツールチップに任意の文字列を埋め込むには?

 もっとも、これだけではツールチップの意味が分かりにくいので、「ページビュー:6,439」のように項目名も表示されるようにしてみよう。

 基本的には、LabelTooltipプロパティに文字列を追加するだけでよいのだが、Visual Studio 2008では[文字列キーワード エディタ]ダイアログが正しく日本語に対応していないようで、マルチバイト文字は化けてしまう。そこで[文字列キーワード エディタ]ダイアログは、あくまでキーワードの入力補助にとどめ、そのほかの文字列を追加するには、コード・エディタから直接編集することをお勧めする。

 この例では、以下のようにコードを追加しておこう。追記部分は太字で示している。

<asp:Series ChartType="Point" Name="Series1"
  XValueMember="pv" YValueMembers="bm" Label="#VAL"
  LabelToolTip="ページビュー:#VALX{N0}" MarkerColor="0, 192, 0">
LabelTooltipプロパティに対する日本語の文字列をコード・エディタで直接編集

 サンプルを実行し、以下のように追加した日本語が反映されていることも確認しておこう。

任意の文字列もツールチップに埋め込むことができる

●X/Y軸以外の値をツールチップに表示するには?

 チャートに表示している以外の値をツールチップに反映させたい場合もあるだろう。例えば、散布図の例であれば、X軸(ページ・ビュー)、Y軸(ブックマーク数)の情報以外に、ユニーク・ページ・ビューの情報を追加的に表示させたいということもあるかもしれない。このような場合には、以下のような設定を施す必要がある。

 以下は、Seriesオブジェクトに対するプロパティ設定である。

プロパティ 設定値
YValuesPerPoint 2
YValueMembers bm, upv
LabelToolTip ページビュー:#VALX\nユニークページビュー:#VALY2\nブックマーク数:#VALY1
Seriesオブジェクトのプロパティ設定

 YValuePerPointsプロパティは、Y軸の値(YValueMembersプロパティ)として割り当てることのできるメンバ(列)の数を指定するものである。この値は、描画するチャートによってデフォルト値が決められている。例えば散布図であれば「1」であるが、バブル・チャートでは「2」となる。バブル・チャートでは、本来のY軸のほかに、バブルの大きさを決める(いわゆる)Z軸が必要であるためだ。チャート・コントロールでは、このように複数の値が必要である場合に、YValueMembersプロパティに複数のメンバを指定することで賄っている*2

*2 具体的な例については、「TIPS:[ASP.NET]チャート・コントロールで株価グラフを作るには?」、「TIPS:[ASP.NET]チャート・コントロールで散布図やバブル・チャートを作成するには?」も併せて参照してほしい。

 このYValuePerPointsプロパティの値は、強制的に変更することも可能だ。例えば、ここではYValueMembersプロパティに「bm, upv」と、複数の列を割り当てるために、YValuePerPointsプロパティに「2」を設定している。

 YValueMembersプロパティにupv(ユニーク・ページ・ビュー)を割り当てているのは、ツールチップで引用するためだ。このように、YValueMembersプロパティに割り当てたメンバは、(直接、チャート描画に利用するのではなく)ツールチップの値として割り当てることもできる。

 LabelToolTipプロパティに含まれる「#VALY1」は1番目のY軸の値を、「#VALY2」は2番目のY軸の値を、それぞれ表している。これらのキーワードは、本来、[キーワード エディタ]ダイアログの書式から[Y 値インデックス]欄を編集することで自動生成できるはずであるが、Visual Studio 2008では(本来チャートでは不要なメンバであるためか)「#VALY2」は編集できなかった。前述した日本語の問題もあるので、LabelToolTipプロパティは、コード・エディタから編集しておこう。次のコードはその例である。

<asp:Series ChartType="Point" Name="Series1"
  XValueMember="pv" YValueMembers="bm, upv" Label="#VAL"
  LabelToolTip="ページビュー:#VALX\nユニークページビュー:#VALY2\nブックマーク数:#VALY1" MarkerColor="0, 192, 0"
  YValuesPerPoint="2">
LabelToolTipプロパティに対する「#VALY2」などのコード・エディタでの編集

 以上を理解したら、サンプルを実行し、冒頭の画面のようにツールチップにページ・ビュー、ユニーク・ページ・ビュー、ブックマーク数が反映されていれば成功である。

 なお、YValueMembersプロパティにダミーのメンバを割り当てる方法は、数値列でしか利用できないようだ。文字列/日付列を指定しても、ゼロに丸められてしまうので、注意してほしい。End of Article

利用可能バージョン:.NET Framework 3.5
利用可能バージョン:.NET Framework 4
カテゴリ:Webフォーム 処理対象:Chartコントロール
使用ライブラリ:Chartコントロール
関連TIPS:[ASP.NET]チャート・コントロールで散布図やバブル・チャートを作成するには?
関連TIPS:[ASP.NET]チャート・コントロールで株価グラフを作るには?

この記事と関連性の高い別の.NET TIPS
[ASP.NET]チャート・コントロールで散布図やバブル・チャートを作成するには?
Windowsフォームでツールチップを表示するには?
[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 記事ランキング

本日 月間