Highcharts箱线图如何自定义最大值、四分位数等tooltip标签？

核心实现逻辑 #

Highcharts的箱线图系列会自动把每个数据点的五个统计维度值，绑定到独立的point对象属性上，完全不需要改造原有数据结构，直接通过自定义tooltip格式化逻辑，就能替换每个数值对应的展示标签：

• point.high：数据序列的最大值
• point.q3：上四分位数值
• point.median：中位数值
• point.q1：下四分位数值
• point.low：数据序列的最小值

具体配置改动 #

在原有图表配置基础上，新增独立的tooltip配置块，通过formatter回调函数自定义tooltip的渲染内容，即可替换默认的标签文案。
改造后的完整可运行代码如下：

Highcharts.chart('container', {
  chart: {
    type: 'boxplot',
    inverted: true,
  },
  // 新增自定义Tooltip配置
  tooltip: {
    formatter: function() {
      const currentPoint = this.point;
      // 自定义五个维度的标签文案，可根据需求随意调整
      const renderList = [
        ['最大值', currentPoint.high],
        ['上四分位数', currentPoint.q3],
        ['中位数', currentPoint.median],
        ['下四分位数', currentPoint.q1],
        ['最小值', currentPoint.low]
      ];
      // 拼接渲染Tooltip内容
      return `
        <div style="min-width: 120px;">
          <div style="font-weight: bold; margin-bottom: 6px;">${currentPoint.series.name}</div>
          ${renderList.map(item => `
            <div style="display: flex; justify-content: space-between; gap: 16px; line-height: 1.7;">
              <span>${item[0]}</span>
              <span style="font-weight: 500;">${item[1]}</span>
            </div>
          `).join('')}
        </div>
      `
    }
  },
  title: {
    text: 'Highcharts Box Plot Example'
  },
  legend: {
    enabled: false
  },
  xAxis: {
    lineWidth: 0,
    tickWidth: 0,
    labels: {
      enabled: false
    }
  },
  yAxis: {
    gridLineWidth: 0,
    labels: {
      enabled: false,
    }
  },
  series: [{
    name: 'Observations',
    data: [
      [760, 801, 848, 895, 965]
    ],
    dataLabels: {
      enabled: true
    }
  }]
})

注意事项 #

• 原有传入的二维数组格式数据不需要改动，Highcharts会自动按顺序将数组值映射到对应的point属性上
• 多箱线图系列场景下，该配置通用，不需要针对每个系列单独编写格式化逻辑，悬停时会自动读取当前对应点的属性值
• 自定义标签的文案、排版样式都可以在formatter函数里自由调整，完全不影响图表其他交互效果

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