telerik 차트 ChartTrackBallBehavior 질문드립니다.

📦 컴포넌트 관련 Q&A
,
1

telerik 차트 질문드립니다.

차트위에 마우스 오버시 해당값을 표출하고싶습니다.

<telerik:RadCartesianChart x:Name="SupplyLineChart" 
                           Grid.Row="1" 
                           Palette="Fluent" 
                           FontSize="7" 
                           Margin="-5,0,-7,-7" 
                           FontFamily="{DynamicResource PretendardLight}">
    <telerik:RadCartesianChart.Grid>
        <telerik:CartesianChartGrid MajorLinesVisibility="Y" 
                                    MajorXLineDashArray="5, 5">
            <telerik:CartesianChartGrid.MajorYLineStyle>
                <Style TargetType="{x:Type Line}">
                    <Setter Property="Stroke" Value="#FF4f515a"/>
                </Style>
            </telerik:CartesianChartGrid.MajorYLineStyle>
        </telerik:CartesianChartGrid>
    </telerik:RadCartesianChart.Grid>
    <telerik:RadCartesianChart.VerticalAxis>
        <telerik:LinearAxis Title="MW" />
    </telerik:RadCartesianChart.VerticalAxis>
    
    <telerik:RadCartesianChart.HorizontalAxis>
        <telerik:CategoricalAxis LabelInterval="3" />
    </telerik:RadCartesianChart.HorizontalAxis>

    <telerik:RadCartesianChart.Behaviors>
        <telerik:ChartTrackBallBehavior ShowTrackInfo="True" TrackInfoUpdated="OnTrackInfoUpdated" >
        </telerik:ChartTrackBallBehavior>
    </telerik:RadCartesianChart.Behaviors>

    <telerik:AreaSeries Stroke="#00AEFF"
                        StrokeThickness="1"
                        ItemsSource="{Binding SupplyAreaDatas}"
                        CategoryBinding="Category"
                        ValueBinding="Value">
        <telerik:AreaSeries.SeriesAnimation>
            <telerik:ChartRevealAnimation AnimationDirection="In" 
                                          Orientation="Horizontal" 
                                          Duration="0:0:6">
                <telerik:ChartRevealAnimation.Easing>
                    <QuarticEase EasingMode="EaseOut"/>
                </telerik:ChartRevealAnimation.Easing>
            </telerik:ChartRevealAnimation>
        </telerik:AreaSeries.SeriesAnimation>
        <telerik:AreaSeries.Fill>
            <SolidColorBrush Color="#00AEFF" Opacity="0.7"/>
        </telerik:AreaSeries.Fill>

        <telerik:AreaSeries.LegendSettings>
            <telerik:SeriesLegendSettings Title="실측값" />
        </telerik:AreaSeries.LegendSettings>

    </telerik:AreaSeries>
    
    <telerik:LineSeries Stroke="#FFFFFFFF" 
                        StrokeThickness="1"
                        ItemsSource="{Binding SupplyLineDatas}"
                        CategoryBinding="Category"
                        ValueBinding="Value">
        <telerik:LineSeries.SeriesAnimation>
            <telerik:ChartRevealAnimation AnimationDirection="In" 
                                          Orientation="Horizontal" 
                                          Duration="0:0:6">
                <telerik:ChartRevealAnimation.Easing>
                    <QuarticEase EasingMode="EaseOut"/>
                </telerik:ChartRevealAnimation.Easing>
            </telerik:ChartRevealAnimation>
        </telerik:LineSeries.SeriesAnimation>

        <telerik:LineSeries.LegendSettings>
            <telerik:SeriesLegendSettings Title="예측값" />
        </telerik:LineSeries.LegendSettings>
    </telerik:LineSeries>

</telerik:RadCartesianChart>

<telerik:RadCartesianChart.Behaviors>
    <telerik:ChartTrackBallBehavior ShowTrackInfo="True" TrackInfoUpdated="OnTrackInfoUpdated" >
    </telerik:ChartTrackBallBehavior>
</telerik:RadCartesianChart.Behaviors>

ShowTrackInfo="True 이부분을 추가하니 마우스 오버시 데이터가 추가되었고

TrackInfoUpdated=“OnTrackInfoUpdated” 추가하여 CS에서 처리하여 출력되는 값을 변경하였습니다.

 private void OnTrackInfoUpdated(object sender, TrackBallInfoEventArgs e)
 {
     
     foreach (var dataPointInfo in e.Context.DataPointInfos)
     {
         if (dataPointInfo.DataPoint is CategoricalDataPoint categoricalDataPoint)
         {
             dataPointInfo.DisplayContent = $"시간: {categoricalDataPoint.Category}\n값: {categoricalDataPoint.Value}";
         }
     }
 }

question

현재 이렇게 나오는데 출력되는 내용에 AreaSeries, LineSeries 있는데 헤더라고해야하나요?

이부분을 수정하고싶고

글씨 크기 및 출력되는 패널 크기를 조절하고 싶습니다.

1개의 좋아요
2

AreaSeries, LineSeries로 출력되는건 DisplayName을 추가하여 처리하였습니다.

1개의 좋아요