ChartJS定时更新图表提示Canvas已被占用报错如何解决

优先推荐复用图表实例的方案，性能消耗更低，仅在需要大幅修改图表核心配置时选择销毁重建方案。

方案1：复用现有Chart实例（推荐） #

• 全局作用域声明变量保存Chart实例，初始值设为null
• 修改封装的请求渲染函数，区分「首次创建」和「后续更新」逻辑：
  • 首次运行时如果实例为空，正常拉取数据后new Chart()创建实例，赋值给全局变量
  • 后续定时触发时，拉取新数据后直接修改实例的data属性对应值，调用update()方法完成更新即可，不需要重复创建实例

示例代码：

// 全局保存图表实例
let myChart = null;

// 封装的请求+渲染函数
async function fetchDataAndRenderChart() {
  // 先拉取服务端数据，可自行添加异常捕获逻辑
  const res = await fetch('/你的服务端接口地址');
  const chartData = await res.json();

  if (!myChart) {
    // 首次运行，创建图表实例
    const ctx = document.getElementById('你的canvas元素ID').getContext('2d');
    myChart = new Chart(ctx, {
      type: 'line', // 你的图表类型
      data: {
        labels: chartData.labels,
        datasets: [{
          label: '你的数据系列名',
          data: chartData.values
        }]
      }
      // 其余图表配置项
    });
  } else {
    // 后续更新，直接修改数据后调用update方法
    myChart.data.labels = chartData.labels;
    myChart.data.datasets[0].data = chartData.values;
    myChart.update();
  }
}

// 页面加载后执行
window.onload = () => {
  fetchDataAndRenderChart();
  setInterval(fetchDataAndRenderChart, 5000);
}

方案2：每次更新前销毁旧实例（适合需要修改图表核心配置的场景） #

• 全局保存图表实例，每次执行封装函数前先判断实例是否存在，存在就调用destroy()方法销毁旧实例，再新建实例

示例代码：

let myChart = null;

async function fetchDataAndRenderChart() {
  const res = await fetch('/你的服务端接口地址');
  const chartData = await res.json();
  const ctx = document.getElementById('你的canvas元素ID').getContext('2d');

  // 先销毁已存在的实例
  if (myChart) {
    myChart.destroy();
  }

  // 每次新建实例
  myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: chartData.labels,
      datasets: [{
        label: '你的数据系列名',
        data: chartData.values
      }]
    }
  });
}

window.onload = () => {
  fetchDataAndRenderChart();
  setInterval(fetchDataAndRenderChart, 5000);
}

• 不要将new Chart()逻辑写在每次轮询都会无差别执行的代码块中，这是本次报错的核心原因
• 异步请求建议添加异常捕获逻辑，避免请求失败导致图表逻辑报错、中断轮询

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