0

WPFToolkit LineSeries グラフを描画していますが、ToolTip を除いてすべて正常に動作します。線上の任意の点でマウスの x 値と y 値を表示するツールチップが必要です。DataPoints (私の場合はかなりまばらです) で機能するこれを見つけました: http://istacee.wordpress.com/2013/03/19/wpf-toolkit-chart-custom-tooltip-on-lineseries- charts/およびチャート領域の任意のポイントについて:ツールチップ 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>

何か案は？

4

1 に答える 1

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;
    }

まず、チャートと軸への参照を取得します (軸には XAML で名前を付けましxAxisたyAxis)。

次に、グラフ テンプレートの一部を見つける必要がありますPlotArea。これは、グラフが描画されるビットです (軸などを除く)。これを取得するためのより良い方法があるかもしれませんが、私はFindDescendantWithNameそれを取得するために呼び出された簡単な方法を使用しました。 .

次に、GetPositionこのチャート プロット エリアに対するマウスの位置を取得するために使用します。最後にGetValueAtPosition、軸のメソッドは、現在のマウス位置のチャート座標の値を提供し、これらの座標をHoverPointプロパティに設定します。

これに関する唯一の問題は、グラフの線の太さが有限であるため、実際にマウスを動かして、同じ X の値に対して異なる Y の値を確認したり、その逆を行ったりできることです。ただし、これを拡張して最も近いプロット ポイントを見つけることは難しくありません。次に、ツールチップを最も近いポイントにスナップできます。または、最も近い 2 つのポイント (マウスの左と右に 1 つずつ) を見つけた場合は、自分で補間を行い、Y が X の現在の値に対応するものを見つけることができます。これを行う価値がある場合は、線の太さに注意してください。

于 2013-07-01T09:30:02.160 に答える