如何在Highcharts图表的Tooltip悬浮提示中显示两列数值的总和

通过自定义tooltip.formatter回调函数，即可实现悬浮提示框展示两列数值和总计数的效果，核心配置如下：

Highcharts.chart('container', {
  // 图表基础配置（x轴、系列、标题等常规配置可按业务需求补充）
  tooltip: {
    shared: true, // 开启共享提示，才能同时获取同维度下两个系列的数值
    useHTML: true, // 开启HTML渲染，方便自定义两列对齐、分割线等样式
    formatter: function () {
      let totalCount = 0
      // 累加两列的数值得到总计数
      this.points.forEach(point => {
        totalCount += point.y
      })
      // 自定义提示框结构
      let tooltipHtml = `<div style="margin-bottom: 8px">${this.x}</div>`
      // 渲染两列对应数值
      this.points.forEach(point => {
        tooltipHtml += `
          <div style="display: flex; justify-content: space-between; padding: 2px 0">
            <span style="color: ${point.color}; margin-right: 24px">${point.series.name}:</span>
            <span>${point.y}</span>
          </div>
        `
      })
      // 渲染总计数行
      tooltipHtml += `
        <div style="display: flex; justify-content: space-between; border-top: 1px solid #eaecef; margin-top: 6px; padding-top: 6px; font-weight: bold">
          <span>总计:</span>
          <span>${totalCount}</span>
        </div>
      `
      return tooltipHtml
    }
  }
})

• 如果仅需要统计指定两个系列的数值而非所有系列，可以在累加逻辑中添加系列名称的判断条件做筛选
• 样式可根据业务需求自行调整，包括字体、间距、分割线样式等

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