Highcharts折线图如何在tooltip中展示字符串类型分类敏感度标签

实现方案 #

第一步：构建敏感度标签查询映射 #

先把sensitivities字段的二维数组转换为以时间戳为键的映射对象，避免每次悬浮都遍历数组，提升查询效率：

// 初始化敏感度映射表，仅存储非null的标签
const sensitivityMap = {}
sensitivities.forEach(([timestamp, label]) => {
  if (label) sensitivityMap[timestamp] = label
})

第二步：自定义折线图tooltip渲染逻辑 #

修改你图表配置中的tooltip项，通过formatter函数自定义渲染内容，判断当前悬浮点的时间戳是否存在对应标签，存在就追加到Value下方：

tooltip: {
  formatter: function () {
    // 基础展示内容，可根据你的原有显示需求调整
    let tooltipHtml = `
      ${Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x)}<br>
      Value: ${this.y.toFixed(2)}
    `
    // 匹配当前点的敏感度标签
    const curSensitivity = sensitivityMap[this.x]
    if (curSensitivity) {
      // 可选：给不同等级标签配置对应颜色，提升辨识度
      const labelColor = {
        Low: '#10b981',
        Medium: '#f59e0b',
        High: '#ef4444'
      }[curSensitivity] || '#6b7280'
      tooltipHtml += `<br>敏感度：<span style="color: ${labelColor}; font-weight: 500">${curSensitivity}</span>`
    }
    return tooltipHtml
  }
}

修改完成后，所有带有非null敏感度标签的数据点，悬浮时都会在tooltip的Value下方展示对应标签，还可以根据标签等级显示不同颜色方便快速识别。

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