Холст уже используется. Диаграмма с идентификатором «0» должна быть уничтожена перед повторным использованием холста. chat.JS

Question

У меня уже есть данные для чата, мне не нужно получать предупреждение в чате. не нужно уничтожать чат. не разрушая чат, дата будет обновлена. я использовал myChat(обновление); но это не сработает - это другой способ решить указанную выше ошибку.

      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

Answer 3

      var myChart = null;

const TapsGraphCard = (props: any) => 
{
    var table = "myChart";
    if(myChart){
        myChart.clear();
        myChart.destroy();
    }
    myChart = new Chart(table, {
        //rest of your code        
    });
}

Answer 4

Если вы используете react-chartjs-2, обязательно добавьте этот импорт:import { Chart as ChartJS } from 'chart.js/auto'Это решило проблему для меня. Обратитесь к этому ответу: /questions/57804550/oshibka-kategoriya-ne-yavlyaetsya-zaregistrirovannoj-shkaloj/60221155#60221155

Answer 5

Когда вы обновляете диаграмму, обязательно сначала вызовите функцию this.chart.destroy(). Это решило проблему для меня.