一、前言
起名字太难了,这篇文章记录一下,利用telerik插件在折线图上实现ToopTip的过程,即鼠标滑过折线时显示一些自定义的信息。
二、坑
1、官方文档:戳我
2、tooltip文档指路:https://docs.telerik.com/devtools/wpf/controls/radchartview/features/behaviors/tooltip
3、请仔细阅读这段话
找谷歌翻译翻译了一下,意思就是说,ToolTipTemplate只对数据点起作用,文档的实例也是用点状图作示例:
<telerik:ScatterPointSeries.TooltipTemplate>
<DataTemplate>
<Border Background="#5A000000" Padding="5" TextElement.Foreground="White">
<StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="X=" FontWeight="Bold" />
<TextBlock Text="{Binding XValue}" />
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Y=" FontWeight="Bold" />
<TextBlock Text="{Binding YValue}" />
</StackPanel>
</StackPanel>
</Border>
</DataTemplate>
</telerik:ScatterPointSeries.TooltipTemplate>
如果折线图想要实现tooltips功能,需要先为这些点指定所需的形状,颜色和大小。
1、实例化PointTemplate
<DataTemplate x:Key="point">
<Ellipse Height="15" Width="15" Fill="Transparent" Cursor="Hand"/>
</DataTemplate>
<telerik:RadCartesianChart.Series>
<telerik:LineSeries
ItemsSource="{Binding LineScheDateCompetion}"
TooltipTemplate="{StaticResource tooltips}"
PointTemplate="{StaticResource point}"
</telerik:LineSeries>
</telerik:RadCartesianChart.Series>
2绑定 TooltipTemplate。
<DataTemplate x:Key="tooltips">
<Border Background="#5A000000" Padding="5" TextElement.Foreground="White">
<StackPanel Orientation="Horizontal">
<TextBlock Text="日期:" FontWeight="Bold" />
<TextBlock Text="{Binding DataItem.Date,StringFormat={}{0:yyyy/MM/dd}}" FontWeight="Bold" />
</StackPanel>
</Border>
</DataTemplate>
设置完长这个样子