Как показать дополнительную информацию о точках в линейной диаграмме?

Question

У меня есть диаграмма LineSeries с графом Polyline с использованием WPF MVVM Мне нужно показать на каждой точке графика некоторый текст, который имеет отношение к конкретной точке, текст должен быть всегда видимым на графике (не как всплывающая подсказка). каждый CurrPointOnGraph - это HydroHeightMeasureViewModel, который содержит свойство с именем PointNote, которое я хочу показать на графике, как метку.

     <UserControl x:Class="HydroHeightMeasurementView" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:dxc="http://schemas.devexpress.com/winfx/2008/xaml/charts" 
     xmlns:DVC="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
     xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit" 
     mc:Ignorable="d"    
     xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit" > 

<DockPanel DataContext="{Binding HydroHeightMeasureMainViewModel}"> 


     <DVC:Chart Title="River Crossing View" Margin="10,10,10,5" Canvas.Top="80" Canvas.Left="10" Foreground="Black" Background="LightSteelBlue" Height="447" > 
      <DVC:Chart.Series> 

       <DVC:LineSeries Title="Height Point" IsSelectionEnabled="True" IndependentValueBinding="{Binding Path=X}" DependentValueBinding="{Binding Path=Y}" SelectedItem="{Binding CurrPointOnGraph, Mode=TwoWay}" ItemsSource="{Binding HydroPoints, BindsDirectlyToSource=True, Mode=OneWay}"> 
        <DVC:LineSeries.DataPointStyle> 
         <Style TargetType="{x:Type DVC:LineDataPoint}"> 
          <Setter Property="Background" Value="SaddleBrown" ></Setter> 
          <Setter Property="Opacity" Value="0" /> 
         </Style> 
        </DVC:LineSeries.DataPointStyle> 
        <DVC:LineSeries.Template> 
         <ControlTemplate TargetType="DVC:LineSeries"> 
          <Canvas x:Name="PlotArea"> 
           <Polyline x:Name="polylinee" 
            Points="{TemplateBinding Points}" 
            Stroke="SaddleBrown" 
            Style="{TemplateBinding PolylineStyle}" IsHitTestVisible="False">          
            </Polyline> 
          </Canvas> 
         </ControlTemplate> 
        </DVC:LineSeries.Template> 
       </DVC:LineSeries> 

      </DVC:Chart.Series> 
      <DVC:Chart.Axes> 
       <DVC:LinearAxis Title="Distance (Meters)" ShowGridLines="{Binding IsShowGrid}" Minimum="0" Orientation="X" > 
       </DVC:LinearAxis> 
       <DVC:LinearAxis Title="Height (Meters)" ShowGridLines="{Binding IsShowGrid}" Minimum="0" Orientation="Y" > 
       </DVC:LinearAxis> 
      </DVC:Chart.Axes> 
     </DVC:Chart> 
</DockPanel> 

Answer 1

Создать DataPointStyle и настроить его свойство Template как показано ниже:

XAML:

<Window 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:WpfApplication224" 
    xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
    xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
    xmlns:Primitives="clr-namespace:System.Windows.Controls.DataVisualization.Charting.Primitives;assembly=System.Windows.Controls.DataVisualization.Toolkit" 
    x:Class="WpfApplication224.MainWindow" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="350" Width="525"> 
<Window.Resources> 
    <Style x:Key="DataPointStyle1" TargetType="{x:Type chartingToolkit:LineDataPoint}"> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="chartingToolkit:LineDataPoint"> 
        <Grid> 
         <Ellipse Fill="{TemplateBinding Background}"/> 
         <Canvas> 
          <TextBlock FontWeight="Bold" Text="{Binding Info}" Margin="15,0,0,0"/> 
         </Canvas> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</Window.Resources> 

<Window.DataContext> 
    <local:MyViewModel/> 
</Window.DataContext> 

<Grid> 
    <chartingToolkit:Chart Margin="0" Title="Chart Title"> 
     <chartingToolkit:LineSeries DependentValuePath="Y" 
            IndependentValuePath="X" 
            ItemsSource="{Binding Data}" 
            DataPointStyle="{StaticResource DataPointStyle1}"> 
      <chartingToolkit:LineSeries.DependentRangeAxis> 
       <chartingToolkit:LinearAxis Orientation="Y" Minimum="0" Maximum="60" Location="Left"/> 
      </chartingToolkit:LineSeries.DependentRangeAxis> 
      <chartingToolkit:LineSeries.IndependentAxis> 
       <chartingToolkit:LinearAxis Orientation="X" Minimum="0" Maximum="6" Location="Bottom"/> 
      </chartingToolkit:LineSeries.IndependentAxis> 
     </chartingToolkit:LineSeries> 
    </chartingToolkit:Chart> 
</Grid> 

ViewModel:

public class MyViewModel 
{ 
    public ObservableCollection<MyDataModelClass> Data { get; set; } 

    public MyViewModel() 
    { 
     Data = new ObservableCollection<MyDataModelClass> 
     { 
      new MyDataModelClass {X = 1, Y = 10, Info = "Info 1" }, 
      new MyDataModelClass {X = 2, Y = 40, Info = "Info 2" }, 
      new MyDataModelClass {X = 3, Y = 20, Info = "Info 3" }, 
      new MyDataModelClass {X = 4, Y = 50, Info = "Info 4" }, 
      new MyDataModelClass {X = 5, Y = 30, Info = "Info 5" }, 
     }; 
    } 
}