Highcharts提示框水平线不显示及自定义失效问题咨询

问题1：提示框内水平线（hr）不可见 #

核心原因是Highcharts默认不解析HTML内容，同时hr元素的样式可能被内置CSS覆盖。解决步骤：

1. 必须在tooltip配置中开启useHTML: true，否则所有HTML标签会被转义成纯文本，无法渲染成元素。
2. 更稳妥的方式是用带样式的div替代hr（避免内置样式冲突），替换原hr代码为：

   tooltipHtml += '<div style="border-top: 1px solid #000; margin: 5px 0; height: 0;"></div>';
   

   若坚持用hr，需加强样式优先级：

   tooltipHtml += '<hr style="border: none; border-top: 1px solid #000 !important; margin: 5px 0;">';
   

问题2：自定义提示框操作未生效 #

绝大多数情况是没开启useHTML: true——Highcharts默认会把formatter返回的HTML字符串转义成纯文本，自定义样式和元素自然不生效。额外检查以下几点：

• 确保formatter挂载在tooltip配置项内，完整配置示例：

  tooltip: {
    useHTML: true, // 必须开启
    formatter: function() {
      // 你的自定义代码
    }
  }
  

• 适配单/多系列场景：单系列图表没有this.points，需改为直接用this，可统一写成const points = this.points || [this];避免循环失效。
• 确认依赖正常：检查Highcharts.numberFormat能正常调用、自定义变量（如colors数组）可访问。

修正后的完整formatter代码 #

formatter: function() {
    let total = 0;
    let tooltipHtml = `<strong>${this.x}</strong><br/>`;

    const colors = ['#857BFB', '#AAA1FC', '#CDC6FD', '#F1B403']; 
    let colorIndex = 0; 

    // 兼容单系列与多系列
    const points = this.points || [this];
    points.forEach(point => {
        total += point.y;
        const color = colors[colorIndex % colors.length]; 
        tooltipHtml += `<span style="color: ${color}">&#9679;</span> ${point.series.name}: ${Highcharts.numberFormat(point.y, 0, ',', ' ')} ₽<br/>`;
        colorIndex++;
    });

    // 用div模拟水平线
    tooltipHtml += '<div style="border-top: 1px solid #000; margin: 6px 0; height: 1px;"></div>';

    tooltipHtml += `<strong>Итого: ${Highcharts.numberFormat(total, 0, ',', ' ')} ₽</strong>`;
    return tooltipHtml;
}

内容的提问来源于stack exchange，提问作者Илим KGZ