如何在LiveCharts中将自定义工具提示集成到折线图中

Question

引用

1. 要生成折线图：https://lvcharts.net/App/examples/v1/Wpf/Line
2. 要生成工具提示，请执行以下操作：https://lvcharts.net/App/examples/v1/Wpf/Tooltips%20and%20Legends

我想做什么

我想制作一个自定义工具提示，类似于参考文献2中的条形图示例，但在参考文献1中是

我做了什么

我复制粘贴了参考2中的工具提示，对其进行了更改以适应不同的变量

出了什么问题

上的工具提示显示框的颜色，不显示任何变量值。

灰色框中应包含单词，但只显示灰色框。

我的代码

对于MainWindow和Tooltip(称为HITooltop(的xaml和xaml.cs数据

主窗口.xaml

<UserControl x:Class="NeoSpace.MainWindow"
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:local="clr-namespace:NeoSpace"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d" 
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<lvc:CartesianChart Series="{Binding SeriesCollection}" LegendLocation="Right" >
<lvc:CartesianChart.AxisY>
<lvc:Axis Title="Sales" LabelFormatter="{Binding YFormatter}"></lvc:Axis>
</lvc:CartesianChart.AxisY>
<lvc:CartesianChart.AxisX>
<lvc:Axis Title="Month" Labels="{Binding Labels}"></lvc:Axis>
</lvc:CartesianChart.AxisX>
<lvc:CartesianChart.DataTooltip>
<local:HITooltip/>
</lvc:CartesianChart.DataTooltip>
</lvc:CartesianChart>
</Grid>
</UserControl>

主窗口.xaml.cs

using System;
using System.Windows.Controls;
using LiveCharts;
using LiveCharts.Wpf;
namespace NeoSpace
{
public partial class MainWindow : UserControl
{
public MainWindow()
{
InitializeComponent();
GraphicOutput HI01 = new GraphicOutput("Device01", "01-02-03-40-50-12", "Idle", 
new ChartValues<double> { 3, 6, 9, 12, 15 }, new ChartValues<double> { 3, 6, 9, 12, 15 });
GraphicOutput HI02 = new GraphicOutput("Device02", "01-02-03-40-50-12", "Idle");
GraphicOutput HI03 = new GraphicOutput(
new ChartValues<double> { 5, 10, 15, 20, 25 }, new ChartValues<double> { 5, 10, 15, 20, 25 });
SeriesCollection = new SeriesCollection
{
new LineSeries
{
Title = HI01.Device,
Values = HI01.Thoroughput
},
new LineSeries
{
Title = HI02.Device,
Values = HI02.Thoroughput,
PointGeometry = null
},
new LineSeries
{
Title = HI03.Device,
Values = HI03.Thoroughput,
PointGeometry = DefaultGeometries.Square,
PointGeometrySize = 15
}
};
Labels = new[] { "Time 01", "Time 02", "Time 03", "Time 04", "Time 05" };
YFormatter = value => value.ToString();
DataContext = this;
}
public SeriesCollection SeriesCollection { get; set; }
public string[] Labels { get; set; }
public Func<double, string> YFormatter { get; set; }
}
}

HITooltip.xaml

<UserControl x:Class="NeoSpace.HITooltip"
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:wpf="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
xmlns:local="clr-namespace:NeoSpace"
mc:Ignorable="d" 
d:DesignHeight="300" d:DesignWidth="300"
d:DataContext="{d:DesignInstance local:HITooltip}"
Background="#E4555555" Padding="20 10" BorderThickness="2" BorderBrush="Orange">
<ItemsControl ItemsSource="{Binding Data.Points}" Grid.IsSharedSizeScope="True">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type wpf:DataPointViewModel}">
<Grid Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="Device"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="BDAddress"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="State"/>
<ColumnDefinition Width="Auto" SharedSizeGroup="Thoroughput"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Stroke="{Binding Series.Stroke}" Fill="{Binding Series.Fill}"
Height="15" Width="15"></Rectangle>
<TextBlock Grid.Column="1" Text="{Binding ChartPoint.Instance.(local:GraphicOutput.Device)}" 
Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
<TextBlock Grid.Column="2" Text="{Binding ChartPoint.Instance.(local:GraphicOutput.BDAddress)}" 
Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
<TextBlock Grid.Column="3" Text="{Binding ChartPoint.Instance.(local:GraphicOutput.State)}" 
Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
<TextBlock Grid.Column="3" Text="{Binding ChartPoint.Instance.(local:GraphicOutput.Thoroughput)}" 
Margin="5 0 0 0" VerticalAlignment="Center" Foreground="White"/>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</UserControl>

HITooltip.xaml.cs

using System.ComponentModel;
using LiveCharts;
using LiveCharts.Wpf;
namespace NeoSpace
{
public partial class HITooltip : IChartTooltip
{
private TooltipData _data;
public HITooltip()
{
InitializeComponent();
DataContext = this;
}
public TooltipData Data
{
get { return _data; }
set
{
_data = value;
OnPropertyChanged("TooltipData");
}
}
public event PropertyChangedEventHandler PropertyChanged;
public TooltipSelectionMode? SelectionMode { get; set; }
protected virtual void OnPropertyChanged(string propertyName = null)
{
if (PropertyChanged != null)
{ PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName)); }
}
}
}

要绘制图形的类GraphicOutput和工具提示上显示的值

using LiveCharts;
namespace NeoSpace
{
public class GraphicOutput
{
public string Device { get; set; }
public string BDAddress { get; set; }
public string State { get; set; }
public ChartValues<double> FrameSize { get; set; }
public ChartValues<double> Thoroughput { get; set; }
public GraphicOutput(string a, string b, string c, ChartValues<double> d1, ChartValues<double> d2)
{
Device = a;
BDAddress = b;
State = c;
FrameSize = d1;
Thoroughput = d2;
}
public GraphicOutput(string a, string b, string c)
{
Device = a;
BDAddress = b;
State = c;
FrameSize = new ChartValues<double> { 1, 2, 3, 4, 5 };
Thoroughput = new ChartValues<double> { 1, 2, 3, 4, 5 };
}
public GraphicOutput(ChartValues<double> d1, ChartValues<double> d2)
{
Device = "A Device";
BDAddress = "11:22:33:44:55:66";
State = "Too Idle";
FrameSize = d1;
Thoroughput = d2;
}
}
}

Answer 1

在HITooltip类中，属性名称应为Data，而不是TooltipData。

public TooltipData Data
{
get { return _data; }
set
{
_data = value;
OnPropertyChanged("Data");
}
}

Answer 2

我是如何得到答案的

• 工具提示.cs

using System.Windows.Controls;
using System.ComponentModel;
using LiveCharts;
using LiveCharts.Wpf;
namespace BraGraphHybridWithCustomTooltips
{
/// <summary>
/// Interaction logic for HybridTooltip.xaml
/// </summary>
public partial class HybridTooltip : IChartTooltip
{
private TooltipData _data;
public HybridTooltip()
{
InitializeComponent();
DataContext = this;
}
public event PropertyChangedEventHandler PropertyChanged;
public TooltipData Data
{
get { return _data; }
set
{
_data = value;
OnPropertyChanged("Data");
}
}
public TooltipSelectionMode? SelectionMode { get; set; }
protected virtual void OnPropertyChanged(string propertyName = null)
{
if (PropertyChanged != null)
PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

• 工具提示.xaml

<UserControl x:Class="BraGraphHybridWithCustomTooltips.HybridTooltip"
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:wpf="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
xmlns:local="clr-namespace:BraGraphHybridWithCustomTooltips"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d" 
d:DesignHeight="450" d:DesignWidth="800"
d:DataContext="{d:DesignInstance local:HybridTooltip}">
<ItemsControl ItemsSource="{Binding Data.Points}" Grid.IsSharedSizeScope="True">
<ItemsControl.ItemTemplate>
<DataTemplate DataType="{x:Type wpf:DataPointViewModel}">
<Grid Margin="2">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*" SharedSizeGroup="State"/>
<ColumnDefinition Width="*" SharedSizeGroup="Framesize"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Stroke="{Binding Series.Stroke}" Fill="{Binding Series.Fill}"
Height="15" Width="15" VerticalAlignment="Center" Margin="5 0 5 0"/>
<WrapPanel Grid.Column="1" >
<TextBlock Text="State:" Margin="5 0 0 0"/>
<TextBlock Text="{Binding ChartPoint.Instance.(local:InputClass.State)}" 
Margin="5 0 0 0" VerticalAlignment="Center"/>
</WrapPanel>
<WrapPanel Grid.Column="3" >
<TextBlock Text="Framesize:" Margin="5 0 0 0"/>
<TextBlock Text="{Binding ChartPoint.Instance.(local:InputClass.Framesize)}" 
Margin="5 0 0 0" VerticalAlignment="Center"/>
</WrapPanel>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</UserControl>

将其作为应用于主窗口

<Window x:Class="BraGraphHybridWithCustomTooltips.MainWindow"
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:BraGraphHybridWithCustomTooltips"
xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<local:HybridTooltip/>
</Grid>
</Window>

瞧(就LiveCharts而言(