RadChart - X 轴本身的工具提示 - Telerik答案

【问题标题】：RadChart - ToolTip for X axis itself - TelerikRadChart - X 轴本身的工具提示 - Telerik
【发布时间】：2014-10-02 10:13:38
【问题描述】：

我正在开发 WPF 应用程序并使用 RadChart 控件。我熟悉 ItemToolTipFormat 和 DataPointMember="Tooltip" 功能，但我想知道是否可以：

我已附上一张图片用于演示：

是否有可能当我将鼠标光标悬停在 x 轴类别上时，我会得到一个工具提示：例如：在附图中，当我将鼠标光标悬停在单词 May（或 Sep 或 Nov 等）上时，我会得到一个工具提示。

上面提到的功能会发生什么，我在图表本身上得到一个工具提示，但如上所述，我想要一个关于 x 轴上类别本身的工具提示（当我将鼠标悬停在图像中显示的月份单词上时)。

提前感谢您的帮助！

【问题讨论】：

标签： wpf telerik radchart

【解决方案1】：

这是个好问题。据我所知，如果不使用有争议的实现，您将无法在这些标签上设置工具提示。我有一个解决方案，但它相当 hacky，只支持固定轴数据。它不支持绑定（我还没有找到通过ItemMapping 元素传递工具提示内容的方法）。

解决方案有 3 个部分； ResourceDictionary、Converter 和 RadChart 控件。

ResourceDictionary（名为“ToolTipResources.xaml”，位于同一 dll 的 Resource 文件夹中）包含工具提示的内容：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <StackPanel
        x:Key="Jan">
        <TextBlock
            HorizontalAlignment="Left"
            Text="Jan"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Text="In January" />
    </StackPanel>
    <StackPanel
        x:Key="Feb">
        <TextBlock
            HorizontalAlignment="Left"
            Text="Feb"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Text="In February" />
    </StackPanel>
    <StackPanel
        x:Key="Mar">
        <TextBlock
            HorizontalAlignment="Left"
            Text="Mar"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Text="In March" />
    </StackPanel>
    <StackPanel
        x:Key="Apr">
        <TextBlock
            HorizontalAlignment="Left"
            Text="Apr"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Text="In April" />
    </StackPanel>
    <StackPanel
        x:Key="May">
        <TextBlock
            HorizontalAlignment="Left"
            Text="May"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Text="In May" />
    </StackPanel>
    <StackPanel
        x:Key="Jun">
        <TextBlock
            HorizontalAlignment="Left"
            Text="Jun"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Text="In June" />
    </StackPanel>
    <StackPanel
        x:Key="Jul">
        <TextBlock
            HorizontalAlignment="Left"
            Text="Jul"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Text="In July" />
    </StackPanel>
    <StackPanel
        x:Key="Aug">
        <TextBlock
            HorizontalAlignment="Left"
            Text="Aug"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Text="In August" />
    </StackPanel>
    <StackPanel
        x:Key="Sep">
        <TextBlock
            HorizontalAlignment="Left"
            Text="Sep"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Text="In September" />
    </StackPanel>
    <StackPanel
        x:Key="Oct">
        <TextBlock
            HorizontalAlignment="Left"
            Text="Oct"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Text="In October" />
    </StackPanel>
    <StackPanel
        x:Key="Nov">
        <TextBlock
            HorizontalAlignment="Left"
            Text="Nov"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Text="In November" />
    </StackPanel>
    <StackPanel
        x:Key="Dec">
        <TextBlock
            HorizontalAlignment="Left"
            Text="Dec"
            FontWeight="Bold" />
        <TextBlock
            HorizontalAlignment="Left"
            Text="In December" />
    </StackPanel>
</ResourceDictionary>

Converter 将标签名称与其关联的工具提示内容链接：

/// <summary>
/// Converts chart label names into associated ToolTip content.
/// </summary>
[ValueConversion(typeof(string), typeof(object))]
public class MonthToToolTipConverter : IValueConverter
{
    private static string _assemblyName;

    static MonthToToolTipConverter()
    {
        _assemblyName = Assembly.GetExecutingAssembly().FullName;
    }

    /// <summary>
    /// Converts a value.
    /// </summary>
    /// <param name="value">The value produced by the binding source.</param>
    /// <param name="targetType">The type of the binding target property.</param>
    /// <param name="parameter">The converter parameter to use.</param>
    /// <param name="culture">The culture to use in the converter.</param>
    /// <returns>A converted value. If the method returns null, the valid null value is used.</returns>
    public object Convert(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        object result = null;
        var labelName = value as string;
        if (labelName != null)
        {
            var toolTipResourcesDictionary = new ResourceDictionary();

            toolTipResourcesDictionary.Source = new Uri(String.Format("pack://application:,,,/{0};component/Resources/ToolTipResources.xaml", _assemblyName), UriKind.Absolute);
            result = toolTipResourcesDictionary[labelName];
        }
        return result;
    }

    /// <summary>
    /// Converts a value.
    /// </summary>
    /// <param name="value">The value that is produced by the binding target.</param>
    /// <param name="targetType">The type to convert to.</param>
    /// <param name="parameter">The converter parameter to use.</param>
    /// <param name="culture">The culture to use in the converter.</param>
    /// <returns>A converted value. If the method returns null, the valid null value is used.</returns>
    public object ConvertBack(object value, Type targetType,
        object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

除了RadChart 控件：

<telerikCharting:ChartArea.AxisX>
    <telerikCharting:AxisX>
        <telerikCharting:AxisX.AxisStyles>
            <telerikCharting:AxisStyles>
                <telerikCharting:AxisStyles.ItemLabelStyle>
                    <Style
                        TargetType="{x:Type TextBlock}">
                        <Setter
                            Property="ToolTip"
                            Value="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource MonthToToolTipConverter}}" />
                    </Style>
                </telerikCharting:AxisStyles.ItemLabelStyle>
            </telerikCharting:AxisStyles>
        </telerikCharting:AxisX.AxisStyles>
    </telerikCharting:AxisX>
</telerikCharting:ChartArea.AxisX>

完整的 RadChart 视图（您的示例来自 Telerik Documentation）：

<Window
    x:Class="YourChartProject.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:telerikCharting="clr-namespace:Telerik.Windows.Controls.Charting;assembly=Telerik.Windows.Controls.Charting"
    xmlns:local="clr-namespace:YourChartProject"
    Title="MainWindow"
    Height="350"
    Width="525">
    <Window.Resources>
        <local:MonthToToolTipConverter
            x:Key="MonthToToolTipConverter" />
    </Window.Resources>
    <Grid>
        <telerik:RadChart
            VerticalAlignment="Top">
            <telerik:RadChart.DefaultView>
                <telerikCharting:ChartDefaultView>
                    <telerikCharting:ChartDefaultView.ChartTitle>
                        <telerikCharting:ChartTitle
                            Content="Year 2009"
                            HorizontalAlignment="Center" />
                    </telerikCharting:ChartDefaultView.ChartTitle>
                    <telerikCharting:ChartDefaultView.ChartLegend>
                        <telerikCharting:ChartLegend
                            x:Name="chartLegend"
                            UseAutoGeneratedItems="True" />
                    </telerikCharting:ChartDefaultView.ChartLegend>
                    <telerikCharting:ChartDefaultView.ChartArea>
                        <telerikCharting:ChartArea
                            LegendName="chartLegend">
                            <telerikCharting:ChartArea.AxisX>
                                <telerikCharting:AxisX
                                    LayoutMode="Between"
                                    Title="Month">
                                    <telerikCharting:AxisX.AxisStyles>
                                        <telerikCharting:AxisStyles>
                                            <telerikCharting:AxisStyles.ItemLabelStyle>
                                                <Style
                                                    TargetType="{x:Type TextBlock}">
                                                    <Setter
                                                        Property="ToolTip"
                                                        Value="{Binding Text, RelativeSource={RelativeSource Self}, Converter={StaticResource MonthToToolTipConverter}}" />
                                                </Style>
                                            </telerikCharting:AxisStyles.ItemLabelStyle>
                                        </telerikCharting:AxisStyles>
                                    </telerikCharting:AxisX.AxisStyles>
                                </telerikCharting:AxisX>
                            </telerikCharting:ChartArea.AxisX>
                            <telerikCharting:ChartArea.DataSeries>
                                <!-- Line Chart -->
                                <telerikCharting:DataSeries
                                    LegendLabel="Turnover">
                                    <telerikCharting:DataSeries.Definition>
                                        <telerikCharting:LineSeriesDefinition></telerikCharting:LineSeriesDefinition>
                                    </telerikCharting:DataSeries.Definition>
                                    <telerikCharting:DataPoint
                                        YValue="154"
                                        XCategory="Jan" />
                                    <telerikCharting:DataPoint
                                        YValue="138"
                                        XCategory="Feb" />
                                    <telerikCharting:DataPoint
                                        YValue="143"
                                        XCategory="Mar" />
                                    <telerikCharting:DataPoint
                                        YValue="120"
                                        XCategory="Apr" />
                                    <telerikCharting:DataPoint
                                        YValue="135"
                                        XCategory="May" />
                                    <telerikCharting:DataPoint
                                        YValue="125"
                                        XCategory="Jun" />
                                    <telerikCharting:DataPoint
                                        YValue="179"
                                        XCategory="Jul" />
                                    <telerikCharting:DataPoint
                                        YValue="170"
                                        XCategory="Aug" />
                                    <telerikCharting:DataPoint
                                        YValue="198"
                                        XCategory="Sep" />
                                    <telerikCharting:DataPoint
                                        YValue="187"
                                        XCategory="Oct" />
                                    <telerikCharting:DataPoint
                                        YValue="193"
                                        XCategory="Nov" />
                                    <telerikCharting:DataPoint
                                        YValue="176"
                                        XCategory="Dec" />
                                </telerikCharting:DataSeries>
                                <!-- Bar Chart -->
                                <telerikCharting:DataSeries
                                    LegendLabel="Expenses">
                                    <telerikCharting:DataSeries.Definition>
                                        <telerikCharting:BarSeriesDefinition></telerikCharting:BarSeriesDefinition>
                                    </telerikCharting:DataSeries.Definition>
                                    <telerikCharting:DataPoint
                                        YValue="45"
                                        XCategory="Jan" />
                                    <telerikCharting:DataPoint
                                        YValue="48"
                                        XCategory="Feb" />
                                    <telerikCharting:DataPoint
                                        YValue="53"
                                        XCategory="Mar" />
                                    <telerikCharting:DataPoint
                                        YValue="41"
                                        XCategory="Apr" />
                                    <telerikCharting:DataPoint
                                        YValue="32"
                                        XCategory="May" />
                                    <telerikCharting:DataPoint
                                        YValue="28"
                                        XCategory="Jun" />
                                    <telerikCharting:DataPoint
                                        YValue="63"
                                        XCategory="Jul" />
                                    <telerikCharting:DataPoint
                                        YValue="74"
                                        XCategory="Aug" />
                                    <telerikCharting:DataPoint
                                        YValue="77"
                                        XCategory="Sep" />
                                    <telerikCharting:DataPoint
                                        YValue="85"
                                        XCategory="Oct" />
                                    <telerikCharting:DataPoint
                                        YValue="89"
                                        XCategory="Nov" />
                                    <telerikCharting:DataPoint
                                        YValue="80"
                                        XCategory="Dec" />
                                </telerikCharting:DataSeries>
                            </telerikCharting:ChartArea.DataSeries>
                        </telerikCharting:ChartArea>
                    </telerikCharting:ChartDefaultView.ChartArea>
                </telerikCharting:ChartDefaultView>
            </telerik:RadChart.DefaultView>
        </telerik:RadChart>
    </Grid>
</Window>

【讨论】：

非常感谢！使用 AxisStyles.ItemLabelStyle 就可以了。