如何在onchange函数中销毁已有AnyChart图表避免重复渲染？

你遇到的核心问题是：单纯清空容器DOM没法彻底销毁AnyChart的图表实例，导致新图表被追加到旧实例上。官方提供的dispose()方法才是正确的销毁方式，完全可以在onchange逻辑里实现类似你提到的方案效果，具体步骤如下：

• 首先在全局声明一个变量存储当前图表实例：

  let currentChart = null;
  

• 修改你的makechart函数，在创建新图表前先销毁旧实例：

  function makechart(data) {
    // 先销毁已有图表
    if (currentChart) {
      currentChart.dispose();
    }
    // 初始化新图表
    anychart.onDocumentReady(function () {
      const chart = anychart.column();
      chart.data(data);
      chart.container('container');
      chart.draw();
      // 保存当前实例到全局变量
      currentChart = chart;
    });
  }
  

• 保持onchange函数的逻辑不变，直接调用makechart即可，不需要手动清空容器：

  document.getElementById("select").onchange = function(){
    const val = this.value;
    let newdata;
    if(val === "1"){
      newdata = [["A", 10], ["B", 20]];
    }else{
      newdata = [["C", 30], ["D", 40]];
    }
    makechart(newdata);
  }
  

原理说明 #

AnyChart创建图表后会生成独立的stage和DOM结构，单纯用innerHTML = ""或者移除容器元素，只能清除表面的DOM节点，但内部的图表实例、事件监听和资源并没有被释放。调用dispose()方法会彻底销毁图表的所有关联资源，包括对应的DOM节点和内部状态，这样重新创建图表时就会像第一次加载一样，完全覆盖旧内容。

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