SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

ComponentZine(ComponentOne)

クリッカブルマップなグラフを.NETで作成する

PowerTools True WinChart for .NETコンポーネントの便利なテクニック

  • このエントリーをはてなブックマークに追加

マウスの座標位置とデータ点からの距離を表示する

 マウスの座標位置とデータ点との距離を表示するには、グラフ全体のピクセル座標をチャート内のグラフデータ座標領域に変換する操作が必要になります。ですが、この座標変換の処理は実に簡単で、ChartGroupクラスのメソッドを使うだけです。

 次の画面は、ピクセル座標が制御するC1Chartコンポーネントの領域と、データ座標が制御する領域(プロット領域)を示しています(オンラインヘルプより抜粋)。

グラフの座標の関係
 グラフの座標の関係

チャート内のマウスの座標位置の取得

 まずは、チャート内のマウスの座標位置を取得する方法です。これには、C1ChartコンポーネントのMouseMoveイベントハンドラを使用します。

 また、チャート内のマウスの座標位置を取得するには、CoordToDataCoordメソッドを使用します。メソッドは4つの引数を使います。最初の2つのパラメータは、MouseMoveイベントから取得したマウスの位置を表すXY座標です。残りの2つのパラメータは、メソッドが変換した結果を格納するXY座標用の整数型変数です。

cg.CoordToDataCoord(e.X, e.Y, xd, yd)

 このメソッドを使用すると、マウスがチャート内のどの座標位置にあるのかを知ることができます。今回は、この座標位置をラベルで表示しています。

VB
Imports C1.Win.C1Chart

Public Class Form1

    Public SeliesNo As Integer
    Public PointNo As Integer
    Public Clearance As Integer

    Private Sub C1Chart1_MouseMove(ByVal sender As Object, _
            ByVal e As System.Windows.Forms.MouseEventArgs) _
               Handles C1Chart1.MouseMove
        Dim xd As Double = 0
        Dim yd As Double = 0
        Dim cg As C1.Win.C1Chart.ChartGroup = C1Chart1.ChartGroups(0)

        cg.CoordToDataCoord(e.X, e.Y, xd, yd)
        Label1.Text = "X,Y = " + xd.ToString("0.00") + " , " _
                               + yd.ToString("0.00")
C#
using C1.Win.C1Chart; // 参照設定

namespace truechart_tips2_cs
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        int SeliesNo = -1, PointNo = -1, Clearance = -1;
        private void c1Chart1_MouseMove(object sender, 
                                        MouseEventArgs e)
        {
            ChartGroup cg = c1Chart1.ChartGroups[0];
            double xd = 0, yd = 0;

            cg.CoordToDataCoord(e.X, e.Y, ref xd, ref yd);
            label1.Text = "X,Y = " 
                        + xd.ToString("0.00") 
                        + " , " 
                        + yd.ToString("0.00");

データ点からの距離の取得

 チャートにある各データ点から、マウスポインタまでの距離も把握することができます。

 この機能をうまく使うと、データ点をクリックした際に、「より詳細な表示がされる」「プレゼンテーション用のアプリケーションが起動する」といった処理を組み込むことができます。またそのデータ点が、チャートのどのシリーズで何番目のポイントなのかも知ることができます。

 この処理は、ChartGroupクラスのCoordToDataIndexメソッドを実行するだけです。CoordToDataIndexメソッドは6つの引数をとります。

cg.CoordToDataIndex(e.X, e.Y, CoordinateFocusEnum.XandYCoord, _
     SeliesNo, PointNo, clearance)
  • 最初の2つの引数は、MouseMoveイベントから取得したマウスの位置を表すXY座標です。
  • 3番目の引数は、CoordinateFocusEnum列挙体のメンバです。この値は、より近いデータ点とピクセル座標からの距離を決定するときに、フォーカスする軸を指定する列挙値です。例えば、2つのデータ点の間にマウスポインタがあり、どちらのデータ点に近いのかを判断する際に、X軸を使うのかY軸を使うのかを列挙体のメンバで指定します。X軸をフォーカスとして選択すると、Y座標の値に関係なく、最も近いX座標を持つデータ点を返します。
  •  
  • 4番目と5番目の引数は、マウスがポイントされているデータ系列とデータ点のインデックス番号を格納する変数を指定します。インデックス値はメソッドから整数で返されます。
  • 6番目の引数は、マウスポインタの位置と最も近いデータ点までのピクセル座標からの距離を格納する変数を指定します。この値は、メソッドからピクセル単位の整数値で返されます。
  • このプログラムでは、データ系列を[SeliesNo]、データ点のインデックス番号を[PointNo]、データ点までの距離を[clearance]という変数に格納しています。

 ここでは、マウスポインタの位置と最も近いデータ点までの距離がどのような情報になっているのかを知るために、その距離をラベルで表示するようにします。

VB
cg.CoordToDataIndex(e.X, e.Y, CoordinateFocusEnum.XandYCoord, _
     SeliesNo, PointNo, Clearance)
        Label2.Text = "間隔 = " + Clearance.ToString()
C#
cg.CoordToDataIndex(e.X, e.Y, CoordinateFocusEnum.XandYCoord, _
     ref SeliesNo, ref PointNo, ref Clearance);
  label2.Text = "間隔 = " + Clearance.ToString();
CoordinateFocusEnum列挙体のメンバ
メンバ名 説明
XandYCoord X軸とY軸
XCoord X軸
YCoord Y軸

データ点の情報の取得

 今度は、データ点をマウスでクリックするとその情報を表示する処理を組み込んでみます。データ点情報を使ってクリッカブルマップを作るようなイメージです。これには、C1ChartコンポーネントのMouseDownイベントハンドラを使用します。

 まず、マウスポインタがデータ点にどのくらい近いときに処理を実行するのかを決めます。データ点との距離が「0」で処理を組もうとすると、かなりマウス操作がシビアになりますから現実的ではありません。

 そこで、データ点との距離が10ピクセル以内でクリックされれば処理を実行するようにします。処理そのものは、ラベルにクリックされたデータ点のデータ系列とデータ点のインデックス番号を表示し、同じデータ系列のグラフの色に似た色でラベルの背景色を設定する、というものになります。

VB
Private Sub C1Chart1_MouseDown(ByVal sender As Object, _
  ByVal e As System.Windows.Forms.MouseEventArgs) _
    Handles C1Chart1.MouseDown
     If clearance <= 10 Then
       Me.Label3.Text = "データセット = " + SeliesNo.ToString() & _
                        "   " & "ポイント = " + PointNo.ToString()
            Select Case SeliesNo
                Case 0
                    Me.Label3.BackColor = Color.Pink
                Case 1
                    Me.Label3.BackColor = Color.PowderBlue
                Case 2
                    Me.Label3.BackColor = Color.LightGreen
                Case 3
                    Me.Label3.BackColor = Color.Thistle
            End Select
        End If
    End Sub
C#
private void c1Chart1_MouseDown(object sender, MouseEventArgs e)
    {
        if (Clearance <= 10)
        {
            label3.Text = "データセット = "
                        + SeliesNo.ToString()
                        + "   " 
                        + "ポイント = "
                        + PointNo.ToString();
            switch (SeliesNo)
            {
                case 0:
                    label3.BackColor = Color.Pink;
                    break;
                case 1:
                    label3.BackColor = Color.PowderBlue;
                    break;
                case 2:
                    label3.BackColor = Color.LightGreen;
                    break;
                case 3:
                    label3.BackColor = Color.Thistle;
                    break;
                }
            }
        }

まとめ

 今回は、グラフのピクセル座標の値を、関連するデータ座標およびデータ点のインデックス番号に変換する機能の基本的な使い方を説明しました。この機能をプログラム実行時にインタラクティブに設定できるような形でアプリケーションに組み込めれば、「プレゼンテーション機能を持ったグラフ」という付加価値をアプリケーションに加えることができるのではないでしょうか。

 PowerTools True WinChart for .NETコンポーネントを利用することで、こういったグラフのクリッカブルマップ機能を手軽に実現できるようになります。

 

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
ComponentZine(ComponentOne)連載記事一覧

もっと読む

この記事の著者

瀬戸 遥(セト ハルカ)

8ビットコンピュータの時代からBASICを使い、C言語を独習で学びWindows 3.1のフリーソフトを作成、NiftyServeのフォーラムなどで配布。Excel VBAとVisual Basic関連の解説書を中心に現在まで40冊以上の書籍を出版。近著に、「ExcelユーザーのためのAccess再...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/1154 2008/08/19 17:21

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング