Highcharts中tooltip调用high值报错及值不更新问题求助

我之前做图表开发时也碰到过几乎一模一样的坑，咱们一步步拆解问题来解决：

1. 先确认最基础的：你的JSON数据结构是否正确？ #

报错Cannot read property 'high' of undefined和值不更新，大概率第一步是数据没正确传到图表的点对象里。你要确保从接口拿到的JSON，每个数据条目都明确包含high字段，并且你在处理数据时，把它放到了图表每个点的对象中，而不是单独拎出来。

举个例子，不能只传数值数组：

// 错误示例：这种结构没法携带high字段
series: [{ data: [5, 7, 9] }]

必须把每个点包装成对象：

// 正确示例：每个点都包含y和high字段
const jsonData = [
  { date: "2024-01-01", value: 5, high: 10 },
  { date: "2024-01-02", value: 7, high: 12 }
];

// 转换为图表需要的格式时，把high带到每个点里
const seriesData = jsonData.map(item => ({
  x: new Date(item.date).getTime(),
  y: item.value,
  high: item.high // 关键：必须把high绑定到点对象上
}));

2. 循环里的变量作用域坑——值不更新的核心原因 #

你说在for循环里定义了high变量，然后传入tooltip，但值始终不变？这十有八九是var的作用域问题。如果循环里用var声明变量，所有回调函数都会共享同一个变量引用，等tooltip触发时，循环已经跑完，high只会是最后一次循环的值。

解决办法很简单：把var换成let，用块级作用域绑定每次循环的变量：

// 错误示例：用var会导致所有tooltip共享最后一个high值
for (var i = 0; i < seriesData.length; i++) {
  var high = seriesData[i].high;
  // 这里的tooltip配置会拿到最后一次循环的high
}

// 正确示例：用let绑定当前循环的high值
for (let i = 0; i < seriesData.length; i++) {
  let high = seriesData[i].high;
  // 每个循环的tooltip配置都会拿到当前的high
}

3. Tooltip里正确的取值姿势 #

不同图表库（比如Highcharts、ECharts）的tooltip回调上下文略有不同，但核心是访问当前触发的点对象：

• 如果是Highcharts：用this.point.high，前提是你已经把high放到每个点对象里（步骤1的操作）
• 如果是ECharts：在tooltip的formatter里，用params.data.high（params是当前点的参数对象）

举个Highcharts的完整示例：

Highcharts.chart('container', {
  tooltip: {
    formatter: function() {
      // this.point就是当前触发的点对象，直接取high即可
      return `<b>${Highcharts.dateFormat('%Y-%m-%d', this.x)}</b><br/>
              当前值：${this.y}<br/>
              最高值：${this.point.high}`;
    }
  },
  series: [{
    data: seriesData // 这里的每个点都包含high字段
  }]
});

4. 排查undefined报错的额外注意点 #

如果还是提示high undefined，检查这两个地方：

• 确认tooltip的触发方式是针对「点」的：比如Highcharts默认是点触发，ECharts要设置trigger: 'item'，如果触发在系列上，this.point或params.data就会是undefined
• 检查是否用了箭头函数：箭头函数会继承外层的this上下文，而不是图表的tooltip上下文，所以在tooltip formatter里别用箭头函数，用普通函数

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