【问题标题】:How to show a value which is not bound by the CategoryPath or ValuePath inside the Telerik's RadCartesianChart's Tooltip?如何在 Telerik 的 RadCartesianChart 的工具提示中显示不受 CategoryPath 或 ValuePath 约束的值?
【发布时间】:2019-11-01 05:15:36
【问题描述】:

我正在使用 Telerik RadCartesianChart。而且我应该显示一个工具提示,它在图表中传达有关系列的信息(例如日期、值、系列的标题)。我能够分别显示图表的 CategoryPath 和 ValuePath 中已经绑定的日期和值。但我不知道如何显示属于同一数据源但不受 CategoryPath 或 ValuePath 约束的系列的标题。 以下是我到目前为止所做的。

<telerik:RadCartesianChart x:Name="chart" Margin="0,10,0,36" Width="auto" Grid.RowSpan="2">
    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartTooltipBehavior HorizontalOffset="-11" VerticalOffset="-50" />
    </telerik:RadCartesianChart.Behaviors>
    <telerik:RadCartesianChart.TooltipTemplate>
        <DataTemplate>
            <Grid>
                <Border Background="White" BorderBrush="Black" BorderThickness="1" Padding="5" CornerRadius="3">
                    <StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Category}" />
                        </StackPanel>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding Value, StringFormat=\{0:N2\}}" />
                        </StackPanel>
                    </StackPanel>
                </Border>
            </Grid>
        </DataTemplate>
    </telerik:RadCartesianChart.TooltipTemplate>
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:DateTimeCategoricalAxis
            x:Name="datetimeAxis"                                            
        LabelFitMode="MultiLine"
        LabelFormat="{Binding Tab.CurrentPoC.LabelFormat}"
        LabelInterval="1"
        LabelOffset="0"
        LabelRotationAngle="270"
        LabelStyle="{DynamicResource LabelStyle}"
        LastLabelVisibility="Visible"
        LineDashArray="1 1"
        LineStroke="{DynamicResource CouleurTexte}"
        LineThickness="1"
        MajorTickInterval="1"
        MajorTickLength="1"
        PlotMode="OnTicks"
        SmartLabelsMode="SmartStep"
        TickThickness="5"
        ZIndex="0" Height="5" />
    </telerik:RadCartesianChart.HorizontalAxis>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis Foreground="White" LastLabelVisibility="Visible" HorizontalLocation="Right"/>
    </telerik:RadCartesianChart.VerticalAxis>
    <telerik:RadCartesianChart.Grid>
        <telerik:CartesianChartGrid MajorLinesVisibility="Y" />
    </telerik:RadCartesianChart.Grid>
    <telerik:RadCartesianChart.Resources>
        <Style x:Key="AxisLineStyle" TargetType="{x:Type telerik:LinearAxis}" >
            <Setter Property="Foreground" Value="{Binding ColorName, Mode=TwoWay, Converter={StaticResource NVarToBrushConverter}}"/>
            <Setter Property="Background" Value="{Binding ColorName, Mode=TwoWay, Converter={StaticResource NVarToBrushConverter}}"/>
        </Style>
        <DataTemplate x:Key="ellipseTemplate">
            <Ellipse Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}"/>
        </DataTemplate>
        <DataTemplate x:Key="rectangleTemplate">
            <Rectangle Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}" />
        </DataTemplate>
        <DataTemplate x:Key="triangleTemplate">
            <Polygon Points="10,5 5,10 15,10 10,3" Stroke="GreenYellow" StrokeThickness="2" Fill="{Binding Converter={StaticResource PaletteConverter}}"/>
        </DataTemplate>
        <!--<DataTemplate x:Key="+Template">
                <Rectangle Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}" />
            </DataTemplate>
            <DataTemplate x:Key="xTemplate">
                <Rectangle Height="10" Width="10" Fill="{Binding Converter={StaticResource PaletteConverter}}" />
            </DataTemplate>-->
        <Style TargetType="telerik:LineSeries" BasedOn="{StaticResource LineSeriesStyle}">
            <Setter Property="LegendSettings" Value="{Binding Converter={StaticResource ChartViewLegendSettingsValueConverter}}"/>
            <Setter Property="ShowLabels" Value="False"/>
            <Setter Property="Stroke" Value="{Binding ColorName, Mode=TwoWay, Converter={StaticResource NVarToBrushConverter}}"/>
            <Setter Property="VerticalAxis">
                <Setter.Value>
                    <telerik:LinearAxis ElementBrush="{Binding Tab.CurrentPoC.LineSeriesColor}" HorizontalLocation="Left"/>
                </Setter.Value>
            </Setter>
            <Setter Property="PointTemplateSelector" Value="{StaticResource templateSelector}"/>
        </Style>
        <Style TargetType="telerik:BarSeries"  BasedOn="{StaticResource BarSeriesStyle}">
            <Setter Property="CombineMode" Value="Stack"/>
            <Setter Property="LegendSettings" Value="{Binding Converter={StaticResource ChartViewLegendSettingsValueConverter}}"/>
            <Setter Property="ShowLabels" Value="False"/>
            <Setter Property="VerticalAxis">
                <Setter.Value>
                    <telerik:LinearAxis ElementBrush="Gray" HorizontalLocation="Right"/>
                </Setter.Value>
            </Setter>
            <Setter Property="PointTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Rectangle Fill="{Binding Converter={StaticResource PaletteConverter}}" />
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style TargetType="telerik:PointSeries" BasedOn="{StaticResource PointSeriesStyle}">
            <Setter Property="LegendSettings" Value="{Binding Converter={StaticResource ChartViewLegendSettingsValueConverter}}"/>
            <Setter Property="ShowLabels" Value="False"/>
            <Setter Property="Width" Value="15"/>
            <Setter Property="Height" Value="15"/>
            <Setter Property="VerticalAxis">
                <Setter.Value>
                    <telerik:LinearAxis ElementBrush="{Binding Tab.CurrentPoC.PointSeriesColor}" HorizontalLocation="Left" />
                    <!--Style="{DynamicResource AxisLineStyle}"-->
                </Setter.Value>
            </Setter>
            <Setter Property="PointTemplateSelector" Value="{StaticResource templateSelector}"/>
        </Style>
    </telerik:RadCartesianChart.Resources>
    <telerik:RadCartesianChart.SeriesProvider>
        <telerik:ChartSeriesProvider Source="{Binding Tab.CurrentPoC.GraphsToDisplay, Mode=TwoWay}">
            <telerik:ChartSeriesProvider.SeriesDescriptors>
                <telerik:CategoricalSeriesDescriptor x:Name="CatSeries" CategoryPath="TimeStampX" ValuePath="ValueY" ItemsSourcePath="Data" TypePath="SerieType"/>
            </telerik:ChartSeriesProvider.SeriesDescriptors>
        </telerik:ChartSeriesProvider>
    </telerik:RadCartesianChart.SeriesProvider>
</telerik:RadCartesianChart>

【问题讨论】:

    标签: c# mvvm telerik


    【解决方案1】:

    为实现您的要求,您可以使用DataPoint 对象的Presenter 属性。

    DataPoint 对象是传递给TooltipTemplate 的数据上下文。

    PresenterDataPoint 的一个属性,它包含对承载具体数据点的系列对象的引用。

        <telerik:RadCartesianChart.TooltipTemplate>
            <DataTemplate>
                <TextBlock Text="{Binding Presenter.DataContext.MySeriesNameProperty}" />
            </DataTemplate>
        </telerik:RadCartesianChart.TooltipTemplate>
    

    您可以在RadChartView documentation 中阅读有关 DataPoint 类的更多信息。

    【讨论】:

    • 嗨,马丁。感谢您的回答。我已经让它工作了。我向数据源对象添加了另一个属性并更改了绑定路径,如下所示&lt;TextBlock Text="{Binding Path=DataItem.LegendName}"/&gt;
    • 很高兴听到这个消息。
    【解决方案2】:

    我通过向数据源对象添加一个名为LegendName 的新属性来使其工作。并像这样&lt;TextBlock Text="{Binding Path=DataItem.LegendName}"/&gt; 更改了绑定路径。不确定这是否是正确的方法,但它按预期工作。

    【讨论】:

      猜你喜欢
      • 2014-05-03
      • 2018-06-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-10-03
      • 1970-01-01
      • 2011-06-12
      相关资源
      最近更新 更多