重构Highcharts代码后点击按钮出现Uncaught TypeError错误求助

问题背景 #

• 原代码使用var声明chartEp0、chartEp1、chartEp2全局变量，通过Highcharts.chart初始化图表，点击「Change MinMax of Chart1」按钮可正常设置极值
• 重构为类创建chartEp0实例后，点击按钮触发错误：Uncaught TypeError: Cannot read properties of undefined (reading '0')，核心原因是SetMinMax函数无法访问类实例化后的chartEp0，作用域不匹配

解决方法 #

• 全局挂载类实例
  如果SetMinMax是全局函数，可将类实例挂载到window对象，确保作用域可访问：

  // 实例化类时挂载到全局
  window.chartEp0 = new ChartClass(/* 初始化参数 */);
  

  之后SetMinMax内可直接通过window.chartEp0访问实例，调用图表的极值设置方法。

• 将极值设置逻辑封装为类方法
  把设置极值的功能整合到类内部，作为实例方法，直接访问类内的图表对象：

  class ChartClass {
    constructor(containerId, options) {
      // 初始化图表并保存为实例属性
      this.chart = Highcharts.chart(containerId, options);
    }
  
    // 新增设置极值的类方法
    setYAxisMinMax(min, max) {
      this.chart.yAxis[0].setExtremes(min, max);
    }
  }
  
  // 实例化并绑定按钮事件
  const chartEp0 = new ChartClass('chart-container', {/* 图表配置 */});
  document.getElementById('minmax-btn').addEventListener('click', () => {
    chartEp0.setYAxisMinMax(0, 100); // 传入目标极值
  });
  

• 通过函数参数传递类实例
  若SetMinMax需保持独立，可在绑定按钮事件时将类实例作为参数传入：

  const chartEp0 = new ChartClass(/* 初始化参数 */);
  document.getElementById('minmax-btn').addEventListener('click', () => {
    SetMinMax(chartEp0);
  });
  
  // 修改SetMinMax接收实例参数
  function SetMinMax(chartInstance) {
    chartInstance.chart.yAxis[0].setExtremes(/* 目标极值 */);
  }
  

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