如何在Highcharts中自定义散点图（Scatter plot）的Tooltip样式

Highcharts中，series.scatter.tooltip 配置项仅支持内容格式化相关属性（比如headerFormat、pointFormat、pointFormatter等），**样式类属性无法直接在系列级tooltip下配置生效，需要按以下两种场景实现：

场景1：所有图表类型的Tooltip共用同一样式 #

直接在全局tooltip配置中定义样式属性即可，散点图的内容格式化规则仍然可以在series.scatter.tooltip下单独配置：

Highcharts.chart('container', {
  // 全局Tooltip配置，对所有系列生效
  tooltip: {
    backgroundColor: '#2a2a2a', // 自定义背景色
    borderColor: '#00aaff', // 自定义边框色
    borderRadius: 8, // 圆角大小
    borderWidth: 2, // 边框宽度
    style: {
      color: '#fff', // 文字颜色
      fontSize: '14px'
    }
  },
  series: [{
    type: 'scatter',
    data: [1, 3, 2, 5, 4],
    // 散点图专属内容格式化配置
    tooltip: {
      headerFormat: '自定义头部<br>',
      pointFormat: 'x值：{point.x}<br>y值：{point.y}'
    }
  }]
})

场景2：仅散点图的Tooltip使用自定义样式，其他系列保持默认 #

开启useHTML属性，结合formatter回调判断系列类型，单独给散点图输出自定义样式的Tooltip内容：

Highcharts.chart('container', {
  tooltip: {
    useHTML: true, // 开启HTML渲染模式，支持自定义样式
    formatter: function() {
      // 当前系列为散点图时，返回自定义结构
      if (this.series.type === 'scatter') {
        return `
          <div style="background:#2a2a2a;border:2px solid #00aaff;border-radius:8px;padding:8px;color:#fff;">
            <div>自定义头部</div>
            <div>x值：${this.x}</div>
            <div>y值：${this.y}</div>
          </div>
        `
      }
      // 其他系列走默认格式化逻辑
      return this.point.tooltipHeaderFormatter + this.point.tooltipFormatter
    }
  },
  series: [
    {
      type: 'scatter',
      data: [1, 3, 2, 5, 4]
    },
    {
      type: 'line',
      data: [2, 4, 3, 6, 5]
    }
  ]
})

注意事项 #

• 开启useHTML后Tooltip会脱离默认SVG渲染体系，自定义样式优先级更高，不会被默认配置覆盖
• 如果散点图Tooltip样式比较复杂，也可以给自定义结构加专属类名，通过全局CSS统一定义样式，维护性更高

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