Chart.js 2.9.4重复绘制图表：旧图无法清除，悬停tooltip闪烁

API 探路者

2026-7-12

解决Chart.js 2.9.4旧图表未清除导致tooltip闪烁问题

你的问题根源在于图表实例的作用域错误：每次创建新图表时，你用var chart重新声明变量，导致上一个图表的实例引用丢失，if (chart) chart.destroy()根本没销毁真正的旧实例，残留的旧图表和新图表叠加，就会出现hover时闪烁的情况。

下面是有效的解决方法：

方法一：修复变量作用域（最推荐）

把chart变量提升到创建函数的外层作用域，确保每次销毁的是上一次的图表实例：

// 把chart变量放在全局或函数外部，避免每次创建时重新声明
let chart; 

function renderChart() {
  // 先销毁旧实例
  if (chart) {
    chart.destroy();
    // 可选：手动清空画布，彻底清除残留
    const canvas = document.getElementById("line-chart");
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
  }

  // 创建新图表
  chart = new Chart(document.getElementById("line-chart"), {
    type: 'line', // 你的图表类型
    data: {
      // 填充你的数据
      labels: ['Jan', 'Feb', 'Mar'],
      datasets: [{
        label: '数据',
        data: [10, 20, 15]
      }]
    },
    options: {
      // 你的配置项
      tooltips: {
        // tooltip相关配置
      }
    }
  });
}

方法二：替换canvas元素（极端情况备用）

如果destroy()仍然无效，可以直接替换整个canvas元素，彻底清除旧实例的残留：

function renderChart() {
  const wrapper = document.getElementById("wrapper");
  const oldCanvas = document.getElementById("line-chart");
  
  // 创建全新的canvas元素
  const newCanvas = document.createElement('canvas');
  newCanvas.id = "line-chart";
  newCanvas.className = "Chart";
  newCanvas.name = "Chart";
  
  // 替换旧canvas
  wrapper.replaceChild(newCanvas, oldCanvas);
  
  // 基于新canvas创建图表
  chart = new Chart(newCanvas, {
    // 你的图表配置
  });
}