Blazor Syncfusion图表Tooltip展示同比支出占比问题求助

安全阿岳

2026-7-3

解决方案

核心思路是利用ChartTooltipInfo的Index属性，从你的数据源costByYears中获取对应年份的PercentageIncrease值，再根据正负值处理显示文本。

修改Tooltip模板代码

<ChartTooltipSettings Enable="true" Fill="gray">
    <Template>
        @{
            var tooltipInfo = context as ChartTooltipInfo;
            // 通过索引获取对应的YearsData对象
            var yearData = costByYears[tooltipInfo.Index];
            // 判断增减类型
            var changeType = yearData.PercentageIncrease >= 0 ? "增加" : "减少";
            // 取绝对值格式化百分比，保留1位小数（可按需调整）
            var percentage = Math.Abs(yearData.PercentageIncrease).ToString("F1");
            
            <b>@tooltipInfo.X : @tooltipInfo.Y</b><br/>
            @if (yearData.Year != costByYears.First().Year)
            {
                <span>较上年支出@changeType@percentage%</span>
            }
            else
            {
                <span>无上年对比数据</span>
            }
        }
    </Template>
</ChartTooltipSettings>

关键说明

获取对应数据：tooltipInfo.Index对应你绑定到图表的costByYears集合的索引，通过这个索引可以直接拿到包含PercentageIncrease的YearsData对象。
增减判断：通过PercentageIncrease的正负值决定显示“增加”还是“减少”，同时取绝对值避免负号重复出现。
边界处理：对第一年的数据（无上年对比）做特殊处理，显示友好提示，避免出现无意义的0%增减。