图表销毁与重建

在 Chart.js 中，每个图表通过 new Chart(...) 创建后，会绑定在 canvas 元素上。如果需要切换图表类型或完全重新生成图表，推荐先使用 chart.destroy() 方法销毁旧的实例，避免内存泄漏或图表异常。

下面演示一个简单示例，用户可以点击按钮在折线图和柱状图之间切换图表类型，每次都会销毁当前图表并重新创建。

(function () {
  let chart;
  const ctx = document.getElementById('switchTypeChart').getContext('2d');
  const baseData = {
    labels: ['一月', '二月', '三月', '四月'],
    datasets: [{
      label: '销售额',
      data: [30, 50, 70, 60],
      backgroundColor: 'rgba(75, 192, 192, 0.5)',
      borderColor: 'rgba(75, 192, 192, 1)',
      fill: false,
      tension: 0.4
    }]
  };

  const createChart = (type) => {
    if (chart) chart.destroy();
    chart = new Chart(ctx, {
      type,
      data: baseData,
      options: {
        responsive: true,
        plugins: {
          legend: { display: true }
        }
      }
    });
  };

  document.getElementById('btnLine').addEventListener('click', () => createChart('line'));
  document.getElementById('btnBar').addEventListener('click', () => createChart('bar'));

  createChart('line');
})();

图表销毁与重建 ​

图表销毁与重建