amCharts 4更新柱状图data属性时触发Uncaught ReferenceError错误

chart变量定义在am4core.ready()的匿名回调函数内部，属于函数作用域内的局部变量，只有回调内部的代码可以访问。而updateChart()函数定义在全局作用域，没有权限读取这个局部变量，因此抛出未定义的报错。

你可以任选以下任意一种方案解决问题：

• 方案1：将chart变量提升到全局作用域定义

// 在全局作用域提前声明变量
var chart;

am4core.ready(function() {
  // 其他初始化逻辑不变
  // 去掉var关键字，直接给全局chart变量赋值
  chart = am4core.create("chartdiv", am4charts.XYChart);
  // 剩余初始化逻辑不变
}, false);

// 原updateChart函数不需要修改，可直接访问全局的chart变量

• 方案2：将更新函数移到回调内部定义

am4core.ready(function() {
  // 其他初始化逻辑不变
  var chart = am4core.create("chartdiv", am4charts.XYChart);
  // 剩余初始化逻辑不变

  // 把updateChart移到回调内部定义，和chart属于同一作用域可直接访问
  function updateChart() {
    chart.data = [/* 你的新数据 */];
  }

  // 如果updateChart需要绑定DOM事件，也在回调内部完成绑定即可
  document.getElementById('updateBtn').addEventListener('click', updateChart);
}, false);

• 方案3：将实例挂载到DOM元素避免污染全局变量

am4core.ready(function() {
  // 其他初始化逻辑不变
  var chart = am4core.create("chartdiv", am4charts.XYChart);
  // 把实例挂载到图表容器DOM的自定义属性上
  document.getElementById('chartdiv').chartInstance = chart;
  // 剩余初始化逻辑不变
}, false);

function updateChart() {
  // 先从DOM元素读取实例
  const chart = document.getElementById('chartdiv').chartInstance;
  if (!chart) return; // 兼容初始化未完成的场景，避免报错
  chart.data = [/* 你的新数据 */];
}

调用updateChart的时机需要晚于am4core.ready回调执行完成，否则图表实例还未初始化完成，依然会出现报错。

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