Chart.js 同一页面中有多个图表（工作但仍然出现错误）

Question

大家下午好。 我正在尝试使用同一页面上的图表。 它正在工作，但我的控制台日志中仍然出现错误：

Uncaught Error: Canvas is already in use. Chart with ID '1' must be destroyed before the canvas with ID 'rankingsActive' can be reused.

我的 HTML

<div>
  <canvas id="rankings" ></canvas>
</div>

<div>
  <canvas id="rankingsActive"></canvas>
</div>

我的 javascript 代码。 我将发布创建我的第一个图表的第一个 function。 我有一个类似的 function ，唯一的区别是最后一行。 不同的图表名称和针对我的第二个 canvas id

function rankingTypes(ranks) {
  //const labels = ["January", "February", "March", "April", "May", "June"]
  const data = {
    labels: Object.keys(ranks),
    datasets: [
      {
        label: "My First dataset",
        backgroundColor: "rgb(255, 99, 132)",
        borderColor: "rgb(255, 99, 132)",
        data: Object.values(ranks),
      },
    ],
  }
  console.log(data)
  console.log(Object.values(ranks))

  const config = {
    type: "pie",
    data: data,
  }

  const rankChart = new Chart(document.getElementById("rankings"), config)
}

Answer 1

这意味着您已经在 canvas 上制作了图表，因此您必须先销毁该图表。 这可以这样做：

const c = Chart.getChart(canvasId);
if (c) c.destroy();

new Chart(canvasId, config);