如何在折线图中显示其他点信息？

Avi 发表于 Dev

avi

我有一个带有使用WPF MVVM的折线图的LineSeries图表，我需要在图表的每个点上显示与特定点相关的文本，该文本应始终在图表上可见（不像工具提示）。每个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>

jsanalytics

创建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" },
        };
    }
}