ApexCharts调用updateOptions时图表实例变量未定义问题求助

问题场景 #

页面加载时ApexCharts可正常渲染初始数据，但选择年份过滤器触发更新操作后，调用updateOptions方法时出现chart实例未定义的错误，接口能正常返回新数据却无法同步到图表中。

问题原因 #

chart实例变量定义在$(document).ready()的AJAX成功回调函数内部，属于局部变量，外部的updateChart1函数无法访问该实例，导致调用chart.updateOptions时报错。

修复方案 #

将chart变量提升到全局作用域，确保更新函数能访问到图表实例。此外，更新数据时推荐拆分操作：用updateOptions修改x轴分类，用updateSeries更新数据（仅更新数据，性能更优）。

修改后的JS代码 #

// 声明全局图表实例变量
let chart;

$(document).ready(function() {
  $.ajax({
    url: "<?php echo $root_url ?>/data-hse-incidents.php",
    type: "GET",
    success: function(data) {
      var month = [];
      var count = [];

      for (var i in data) {
        month.push(data[i].month);
        count.push(data[i].count);
      }

      var options = {
        series: [{
          name: 'Total Count',
          data: count,
        }],
        chart: {
          type: 'bar',
          height: 300
        },
        plotOptions: {
          bar: {
            horizontal: false,
            columnWidth: '30px',
            endingShape: 'rounded',
            dataLabels: {
              position: 'top',
            },
          },
        },
        dataLabels: {
          enabled: true,
          offsetY: -20,
          style: {
            fontSize: '12px',
            colors: ["#304758"]
          }
        },
        stroke: {
          show: true,
          width: 2,
          colors: ['transparent']
        },
        xaxis: {
          categories: month,
          title: {
            text: 'Month'
          }
        },
        yaxis: {
          title: {
            text: 'Total Count'
          }
        },
        fill: {
          opacity: 1
        },
        tooltip: {
          y: {
            formatter: function(val) {
              return val
            }
          }
        }
      };

      // 给全局变量赋值图表实例
      chart = new ApexCharts(document.querySelector("#hse-incidents-ytd"), options);
      chart.render();

    },
    error: function(data) {}
  });
});

function updateChart1() {
  var filter_year = $('#yearFilter').val();
  $.ajax({
    url: "<?php echo $root_url ?>/data-hse-incidents.php?y=" + filter_year,
    type: "GET",
    success: function(data) {
      var month = [];
      var count = [];
      for (var i in data) {
        month.push(data[i].month);
        count.push(data[i].count);
      }

      // 更新x轴分类
      chart.updateOptions({
        xaxis: {
          categories: month
        }
      });
      // 更新系列数据（更高效的方式）
      chart.updateSeries([{
        data: count
      }]);
    },
    error: function(data) {}
  });
}

function drawchart1() {
  updateChart1();
}

关键修改点 #

1. 在JS最外层声明let chart;，将图表实例变量改为全局可访问
2. 在AJAX成功回调中，把创建的图表实例赋值给全局chart变量
3. 拆分更新操作，分别处理x轴分类和数据，逻辑更清晰且性能更优

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