# 图表销毁与重建

URL: https://caijiao.org/chartjs/05-dynamic/03-destroy-recreate
Source: docs/chartjs/05-dynamic/03-destroy-recreate.md
Description: 介绍如何在 Chart.js 中销毁已存在的图表实例，并重新创建一个新的图表，常用于需要根据用户操作动态切换图表类型或配置的场景。

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

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

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

[在线代码演示](/chartjs/demos/18.html)