XamDataChart – クリックされた位置に十字線 (Crosshair) を表示する

XamDataChart の CrosshairVisibility プロパティを “Visible” に設定すると、チャート上でマウスをホバーした際にカーソル位置に十字線が表示されるようになります。

ValueOverlay 機能を使用し、この十字線をマウスクリックで固定表示させるようにします。

まず、縦方向用と横方向用の ValueOverlay を作成し、それぞれの Axis プロパティに X 軸および Y 軸を設定します。Visibility プロパティを Collapsed に設定し、 XamDataChart の Series コレクションに追加しておきます。

ValueOverlay vOverlay = new ValueOverlay();
vOverlay.Name = "vOverlay";
vOverlay.Axis = this.xAxis;
vOverlay.IsAxisAnnotationEnabled = true;
vOverlay.Visibility = Visibility.Collapsed;
this.xamDataChart1.Series.Add(vOverlay);

ValueOverlay hOverlay = new ValueOverlay();
hOverlay.Name = "hOverlay";
hOverlay.Axis = this.yAxis;
hOverlay.IsAxisAnnotationEnabled = true;
hOverlay.Visibility = Visibility.Collapsed;
this.xamDataChart1.Series.Add(hOverlay);

次に、XamDataChart の PlotAreaClicked イベントをハンドリングし、イベント引数から取得したクリック地点の X と Y 位置をチャートの座標に変換した値をそれぞれの ValueOverlay の Value プロパティに設定します。そして、Visibility プロパティを Visible に戻して ValueOverlay が表示されるようにします。

private void xamDataChart1_PlotAreaClicked(object sender, PlotAreaMouseButtonEventArgs e)
{
	Series vOverlay = this.xamDataChart1.Series.First(s => s.Name == "vOverlay");
	(vOverlay as ValueOverlay).Value = xAxis.UnscaleValue(e.PlotAreaPosition.X);
	vOverlay.Visibility = Visibility.Visible;

	Series hOverlay = this.xamDataChart1.Series.First(s => s.Name == "hOverlay");
	(hOverlay as ValueOverlay).Value = yAxis.UnscaleValue(e.PlotAreaPosition.Y);
	hOverlay.Visibility = Visibility.Visible;
}