Highcharts报错：Cannot read properties of undefined (reading 'series') 求助

报错原因拆解 #

• chart[0].series报错的核心是：你定义的chart变量是单个Highcharts实例对象，不是数组，直接用chart[0]会得到undefined，自然无法读取series属性。
• 移除第一种方法后程序能运行，但拿不到目标数据29.9，本质是代码执行时机错误——你在图表还未完全渲染完成时，就尝试访问Highcharts.charts[0]里的系列数据，此时实例可能还未被存入数组，或者数据还未初始化。

可行解决思路 #

1. 利用图表加载事件确保时机正确 #

Highcharts提供了load事件，会在图表完全渲染完成后触发，此时可以安全访问所有系列数据：

var chart = Highcharts.chart('container', {
  title: {
    text: 'Monthly Average Temperature'
  },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar']
  },
  series: [{
    name: 'Tokyo',
    data: [29.9, 71.5, 106.4]
  }],
  // 新增load事件
  events: {
    load: function() {
      // this指向当前已渲染完成的图表实例
      const targetValue = this.series[0].data[0].y;
      console.log('目标数据：', targetValue); // 输出29.9
    }
  }
});

2. 外部访问时保证执行顺序 #

如果需要在图表实例创建的外部代码中获取数据，必须确保这段代码在图表实例完全创建之后执行：

// 先创建图表实例
var chart = Highcharts.chart('container', {
  // 图表配置...
});

// 确保这段代码在实例创建后执行（比如放在函数末尾、异步回调中）
const targetValue = chart.series[0].data[0].y;
console.log('目标数据：', targetValue);

3. 正确使用Highcharts.charts数组 #

Highcharts.charts会按创建顺序存储所有图表实例，但只有图表成功渲染后才会被加入数组。如果要用这个方式，同样要保证访问时机：

// 可以用setTimeout临时验证（生产环境建议用load事件）
setTimeout(() => {
  const targetValue = Highcharts.charts[0].series[0].data[0].y;
  console.log('目标数据：', targetValue);
}, 100);

注意点 #

• series[0].data是数据点对象的数组，直接打印会显示对象结构，需要访问y属性才能拿到具体数值（比如29.9）。

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