图表销毁与重建

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

示例无法以 iframe 加载（请检查路径或将 demo 放到 public/）。