Chart.js切换下拉选项图表数据叠加：destroy等方法无效求助

这种旧数据在悬停时还显示的情况我太熟悉了！之前帮好几个开发者排查过类似问题，大概率是实例销毁不彻底或者作用域/事件绑定的问题，给你几个靠谱的解决方案：

1. 确保实例销毁的正确姿势 #

很多时候问题出在chart.destroy()没真正执行——要么是你的chart变量作用域不对（比如在函数内部声明，每次调用都新建变量，旧实例根本没被引用到），要么是销毁后没重置变量。

试试这个标准流程：

// 把chart变量放在全局或者父作用域，确保每次都能访问到同一个实例
let myChart = null;

function renderChart(selectedData) {
  // 第一步：如果已有实例，先彻底销毁
  if (myChart) {
    myChart.destroy();
    myChart = null; // 必须重置为null，避免残留的引用导致内存泄漏
  }

  // 第二步：获取同一个canvas元素（别动态创建新的！）
  const ctx = document.getElementById('your-chart-canvas').getContext('2d');
  
  // 第三步：创建新的图表实例
  myChart = new Chart(ctx, {
    type: 'line', // 替换成你的图表类型
    data: selectedData,
    options: {
      // 你的配置项，比如tooltip、刻度等
    }
  });
}

2. 检查是否重复绑定了下拉事件 #

如果你的下拉列表change事件被绑定了多次（比如每次页面渲染都绑定一次），就会导致每次切换选项都创建新的图表实例，旧实例还在DOM里偷偷运行，悬停时自然会触发旧数据的tooltip。

解决方法：要么确保事件只绑定一次（比如放在DOMContentLoaded里只执行一次），要么每次绑定前先解绑：

const dropdown = document.getElementById('your-dropdown');

// 先解绑旧事件，再绑定新的
dropdown.removeEventListener('change', handleDropdownChange);
dropdown.addEventListener('change', handleDropdownChange);

function handleDropdownChange(e) {
  const selectedValue = e.target.value;
  const newData = fetchYourData(selectedValue); // 替换成你的数据获取逻辑
  renderChart(newData);
}

3. 用update()方法替代销毁重建（更高效） #

如果不想每次都销毁实例，也可以直接更新现有实例的数据，然后调用update()方法，这样更高效：

function updateChart(selectedData) {
  if (myChart) {
    // 直接替换整个data对象
    myChart.data = selectedData;
    // 如果需要更新配置，也可以修改options
    // myChart.options.tooltip.titleFontSize = 14;
    // 触发图表更新
    myChart.update('none'); // 'none'是过渡动画类型，可选
  } else {
    // 第一次初始化图表
    const ctx = document.getElementById('your-chart-canvas').getContext('2d');
    myChart = new Chart(ctx, {
      type: 'line',
      data: selectedData,
      options: {}
    });
  }
}

4. 排查DOM中是否有多个canvas元素 #

有时候不小心会动态创建多个canvas（比如每次切换都append一个新的），旧的canvas隐藏但没被移除，导致旧图表实例还在运行。打开浏览器开发者工具的Elements面板，看看是不是有多个id相同或者类相同的canvas元素，只保留一个即可。

按上面的方法试一遍，应该能解决悬停时显示旧数据的问题！

内容的提问来源于stack exchange，提问作者Андрей