Highcharts Tooltip条件格式化：零值替换短横线报错求助

我明白你遇到的困扰了——直接在pointFormat里加条件语句会报错，这是因为Highcharts的字符串模板语法不支持直接嵌入JavaScript逻辑。咱们换用formatter函数来实现这个需求就没问题了，它允许我们完全自定义tooltip的内容，包括条件判断。

修改后的Tooltip配置 #

下面是调整后的完整配置，既保留了你原来的HTML样式，又实现了零值替换为短横线的功能：

tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true,
    formatter: function() {
        // 先拼接头部内容
        let tooltipContent = this.headerFormatter(this);
        
        // 遍历每个系列的点，处理数值显示
        this.points.forEach(point => {
            const value = point.y === 0 ? '-' : `${point.y.toFixed(1)} %`;
            tooltipContent += `
                <tr>
                    <td style="color:${point.series.color};padding:0">${point.series.name}: </td>
                    <td style="padding:0"><b>${value}</b></td>
                </tr>
            `;
        });
        
        // 拼接尾部内容
        tooltipContent += this.footerFormatter(this);
        return tooltipContent;
    }
}

关键说明： #

• 我们用formatter函数替代了原来的pointFormat，因为它能直接编写JS逻辑，判断point.y是否为0
• 当值为0时返回短横线-，否则保留你原来的.1f格式（用toFixed(1)实现）
• 调用headerFormatter和footerFormatter来复用原来的头部和尾部模板，不用重新写一遍HTML结构
• 保持shared: true和useHTML: true的配置，确保tooltip的展示效果和之前一致

这样修改后，tooltip里的零值就会被替换成短横线，而且不会出现报错啦～

内容的提问来源于stack exchange，提问作者vetrivel