画布已投入使用。必须先销毁 ID 为“0”的图表，然后才能重新使用画布。图表.JS

Question

我已经有了图表的数据，我不需要在图表中收到警告。不需要破坏图表。在不破坏图表的情况下更新日期。我用了 myChart（更新）；但这不起作用是否还有其他方法可以解决上述错误。

const TapsGraphCard = (props: any) => {
  var table = "myChart";
  var myChart = new Chart(table, {
    type: "bar",
    data: {
      labels: [
        "Day 1",
        "Day 2",
        "Day 3",
        "Day 4",
        "Day 5",
        "Day 6",
        "Day 7",
        "Day 8",
        "Day 9",
        "Day 10",
      ],
      datasets: [
        {
          label: "no.of Taps",
          data: [32, 256, 144, 168, 248, 96, 144, 168, 40, 144],
        },
      ],
    },

    options: {
      
      scales: {
        x: {

          display: false,
          grid: {
            display: false
          }
        },
        y: {

          display: false, 
          grid: {
            display: false
          }
        }
      },
    }
  });

  return (
    <div className="insights-container p-3">
      <div className="blue-heading">No. of Taps</div>
      <div className="description">Last 10 days</div>{" "}
      <>
      <div id="chartReport">
        <canvas id="myChart"></canvas>
        </div>
      </>
    </div>
  );
};

Answer 1

当组件被卸载时，画布不会被破坏，并且ref仍然保留以前的值。试试这个：

const TapsGraphCard = (props: any) => {

  useEffect(() => {
  var myChart = new Chart(table, config);

  // when component unmounts
  return () => {
      myChart.destroy()
    }
  }, [])
  
  //  ...rest of your code
};

清理可确保卸载组件时画布被销毁，并在组件再次安装后创建新实例。

Answer 2

如果使用反应与打字稿导入这个

import "chart.js/auto";

这对于 eslint @typescript 来说没问题