图表销毁与重建

在 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");
})();

在线代码演示

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>图表销毁与重建</title>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    body {
      max-width: 700px;
      margin: 2rem auto;
      font-family: sans-serif;
      background: #f9f9f9;
      padding: 1rem;
      text-align: center;
    }
    canvas {
      background: #fff;
      border: 1px solid #ccc;
      margin: 1rem auto;
    }
    button {
      margin: 0.5rem;
      padding: 0.5rem 1rem;
      font-size: 14px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div>
    <button id="btnLine">折线图</button>
    <button id="btnBar">柱状图</button>
  </div>
  <canvas id="switchTypeChart" width="700" height="400"></canvas>
  <script>
    (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) =&gt; {
    if (chart) chart.destroy();
    chart = new Chart(ctx, {
      type,
      data: baseData,
      options: {
        responsive: true,
        plugins: {
          legend: { display: true }
        }
      }
    });
  };

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

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

</script>
</body>
</html>

图表销毁与重建

相关内容