WPFToolkit LineSeries 전체에 대한 툴팁을 어떻게 얻을 수 있습니까?

Question

WPFToolkit LineSeries 그래프를 그리는 중 툴팁을 제외하고 모두 잘 동작합니다. 나는 툴팁이 라인에 어떤 포인트에 대한 마우스의 x와 y 값을 표시합니다. 차트 영역에있는 모든 지점에 대한 http://istacee.wordpress.com/2013/03/19/wpf-toolkit-chart-custom-tooltip-on-lineseries-charts/을이 : 나는 (내 경우는 매우 드물다), 데이터 포인트에 대한 어떤 작품이 발견했습니다 Show series value over any point on chart using tooltip c#.

이 내 코드는 지금까지 있습니다 :

<Grid.Resources> 
    <ResourceDictionary> 
     <ControlTemplate x:Key="CommonLineSeriesDataPointTemplate" TargetType="chartingToolkit:LineDataPoint"> 
     <Grid x:Name="Root" Opacity="1" /> 
     </ControlTemplate> 

     <Style x:Key="CommonLineSeriesDataPoint" TargetType="chartingToolkit:LineDataPoint"> 
     <Setter Property="Template" Value="{StaticResource CommonLineSeriesDataPointTemplate}" /> 
     </Style> 

     <Style x:Key="lineSeriesStyle" TargetType="{x:Type chartingToolkit:LineSeries}"> 
     <Setter Property="IsTabStop" Value="False" /> 
     <Setter Property="DataPointStyle" Value="{StaticResource CommonLineSeriesDataPoint}" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
      <ControlTemplate TargetType="chartingToolkit:LineSeries"> 
       <Canvas x:Name="PlotArea"> 
       <Polyline Points="{TemplateBinding Points}" > 
        <Polyline.Stroke> 
        <SolidColorBrush Color="Red"/> 
        </Polyline.Stroke> 
       </Polyline> 
       </Canvas> 
      </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     </Style> 

     <DataTemplate x:Key="chartTemplate" DataType="{x:Type Views:GraphCurve}"> 
     <chartingToolkit:LineSeries ItemsSource="{Binding}" 
            IndependentValuePath="X" 
            DependentValuePath="Y" 
            Style="{StaticResource lineSeriesStyle}" /> 
     </DataTemplate> 
    </ResourceDictionary> 
</Grid.Resources> 

<chartingToolkit:Chart BorderBrush="DarkGray" 
         SeriesSource="{Binding GraphItems}" 
         SeriesTemplate="{StaticResource chartTemplate}"> 

    <chartingToolkit:Chart.Axes> 
    <chartingToolkit:LinearAxis Orientation="X" /> 
    <chartingToolkit:LinearAxis Orientation="Y" /> 
    </chartingToolkit:Chart.Axes> 
</chartingToolkit:Chart> 

어떤 아이디어?

Answer 1

당신은 폴리 라인의 툴팁에 표시 할 마우스의 총수 MouseMove 이벤트를 사용하고 추적을 시도 할 수 있습니다. IRangeAxis은 픽셀 좌표를 취하여 축 좌표의 값으로 변환하는 GetValueAtPosition 메서드를 제공합니다.

우선, 폴리 라인에 툴팁을 추가

<Polyline Points="{TemplateBinding Points}" > 
    <Polyline.Stroke> 
     <SolidColorBrush Color="Red"/>          
    </Polyline.Stroke> 
    <Polyline.ToolTip> 
     <ToolTip> 
      <StackPanel> 
       <TextBlock Text="{Binding HoverPoint.X}"/> 
       <TextBlock Text="{Binding HoverPoint.Y}"/> 
      </StackPanel> 
     </ToolTip> 
    </Polyline.ToolTip> 
</Polyline> 

여기

나는이 뷰의 뷰 모델의 속성에 바인딩 한이 HoverPoint을했다. (나는 ReactiveUI를 사용하고 있지만 INotifyPropertyChanged를 구현하는 다른 뭔가를 사용할 수 있습니다)보기 모델이 정의해야합니다 :

private Point hoverPoint; 
public Point HoverPoint 
{ 
    get { return hoverPoint; } 
    set { this.RaiseAndSetIfChanged(me => me.HoverPoint, ref hoverPoint, value); } 
} 

그런 다음, 마지막으로, 우리는 마우스가 주위를 이동할 때이 속성을 업데이트해야

차트 영역. 바인딩은 툴팁 업데이트를 처리합니다. 당신이 차트에 MouseMove 이벤트에 대한 처리기를 추가하는 경우 :

<chartingToolkit:Chart MouseMove="Chart_MouseMove" ... 

는 다음과 같이 핸들러를 입력 :

private void Chart_MouseMove(object sender, MouseEventArgs e) 
    { 
     var chart = (Chart)sender; 
     var xAxisRange = (IRangeAxis)xAxis; 
     var yAxisRange = (IRangeAxis)yAxis; 

     var plotArea = FindDescendantWithName(chart, "PlotArea"); 
     if (plotArea == null) 
     { 
      return; 
     } 
     var mousePositionInPixels = e.GetPosition(plotArea); 
     var mouseXPositionInChartUnits = (double)xAxisRange.GetValueAtPosition(new UnitValue(mousePositionInPixels.X, Unit.Pixels)); 
     var mouseYPositionInChartUnits = (double)yAxisRange.GetValueAtPosition(new UnitValue(plotArea.Height - mousePositionInPixels.Y, Unit.Pixels)); 

     ((MainWindowViewModel)DataContext).HoverPoint = new Point(mouseXPositionInChartUnits, mouseYPositionInChartUnits); 
    } 

    public static FrameworkElement FindDescendantWithName(DependencyObject root, string name) 
    { 
     var numChildren = VisualTreeHelper.GetChildrenCount(root); 

     for (var i = 0; i < numChildren; i++) 
     { 
      var child = (FrameworkElement) VisualTreeHelper.GetChild(root, i); 
      if (child.Name == name) 
      { 
       return child; 
      } 

      var descendantOfChild = FindDescendantWithName(child, name); 
      if (descendantOfChild != null) 
      { 
       return descendantOfChild; 
      } 
     } 

     return null; 
    } 

는 첫째, 우리는 차트와 축에 대한 참조를 얻을 (I라는했습니다 내 축 xAxis 및 yAxis이 XAML에 있음).

그런 다음 그래프가 그려지는 비트 인 축 템플릿의 PlotArea 부분을 찾아야합니다 (축 등 제외). 더 좋은 방법이있을 수 있지만 간단한 방법을 사용했습니다. 그것을 얻으려면 FindDescendantWithName라고합니다.

그런 다음,이 차트의 그림 영역을 기준으로 마우스 위치를 얻을 수 GetPosition를 사용합니다. 마지막으로, 축에 GetValueAtPosition 방법은 우리에게 현재 마우스 위치의 차트 좌표 값을 제공하고, 우리는 HoverPoint 속성이 공동 ordindates을 설정합니다.

이 유일한 문제는 당신이 실제로 그 반대의 경우도 마찬가지 주위에 마우스를 이동하고 X의 같은 값에 대한 Y의 서로 다른 값을 참조하거나 할 수 있도록 그래프 선은 유한 한 두께를 가지고 있다는 것입니다. 그러나 가장 가까운 플롯 지점을 찾기 위해 이것을 확장하는 것은 어렵지 않습니다. 그러면 툴팁을 가장 가까운 지점에 스냅 할 수 있습니다. 또는 두 개의 가장 가까운 점 (마우스 왼쪽과 오른쪽 중 하나)을 찾으면 보간법을 직접 수행하고 Y가 현재 X 값에 해당하는 점을 알아낼 수 있습니다. 이것이 가치가 있다면 라인 두께에주의하십시오.