マウスの座標位置とデータ点からの距離を表示する
マウスの座標位置とデータ点との距離を表示するには、グラフ全体のピクセル座標をチャート内のグラフデータ座標領域に変換する操作が必要になります。ですが、この座標変換の処理は実に簡単で、ChartGroup
クラスのメソッドを使うだけです。
次の画面は、ピクセル座標が制御するC1Chartコンポーネントの領域と、データ座標が制御する領域(プロット領域)を示しています(オンラインヘルプより抜粋)。
チャート内のマウスの座標位置の取得
まずは、チャート内のマウスの座標位置を取得する方法です。これには、C1ChartコンポーネントのMouseMove
イベントハンドラを使用します。
また、チャート内のマウスの座標位置を取得するには、CoordToDataCoord
メソッドを使用します。メソッドは4つの引数を使います。最初の2つのパラメータは、MouseMove
イベントから取得したマウスの位置を表すXY座標です。残りの2つのパラメータは、メソッドが変換した結果を格納するXY座標用の整数型変数です。
cg.CoordToDataCoord(e.X, e.Y, xd, yd)
このメソッドを使用すると、マウスがチャート内のどの座標位置にあるのかを知ることができます。今回は、この座標位置をラベルで表示しています。
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")
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番目の引数は、マウスポインタの位置と最も近いデータ点までのピクセル座標からの距離を格納する変数を指定します。この値は、メソッドからピクセル単位の整数値で返されます。
ここでは、マウスポインタの位置と最も近いデータ点までの距離がどのような情報になっているのかを知るために、その距離をラベルで表示するようにします。
cg.CoordToDataIndex(e.X, e.Y, CoordinateFocusEnum.XandYCoord, _
SeliesNo, PointNo, Clearance)
Label2.Text = "間隔 = " + Clearance.ToString()
cg.CoordToDataIndex(e.X, e.Y, CoordinateFocusEnum.XandYCoord, _ ref SeliesNo, ref PointNo, ref Clearance); label2.Text = "間隔 = " + Clearance.ToString();
メンバ名 | 説明 |
XandYCoord | X軸とY軸 |
XCoord | X軸 |
YCoord | Y軸 |
データ点の情報の取得
今度は、データ点をマウスでクリックするとその情報を表示する処理を組み込んでみます。データ点情報を使ってクリッカブルマップを作るようなイメージです。これには、C1ChartコンポーネントのMouseDown
イベントハンドラを使用します。
まず、マウスポインタがデータ点にどのくらい近いときに処理を実行するのかを決めます。データ点との距離が「0」で処理を組もうとすると、かなりマウス操作がシビアになりますから現実的ではありません。
そこで、データ点との距離が10ピクセル以内でクリックされれば処理を実行するようにします。処理そのものは、ラベルにクリックされたデータ点のデータ系列とデータ点のインデックス番号を表示し、同じデータ系列のグラフの色に似た色でラベルの背景色を設定する、というものになります。
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
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コンポーネントを利用することで、こういったグラフのクリッカブルマップ機能を手軽に実現できるようになります。