Se han implementado varios gráficos y queremos generar dinámicamente un nuevo gráfico cada vez que se presiona el botón. Sin embargo, dice que el gráfico no se puede dibujar porque actualmente existe un gráfico con una identificación específica. ¿Cómo resuelvo estos errores? ¿Hay alguna forma de corregir el error sin destruir el gráfico implementado? A continuación se muestra mi código.
const main = () => { const [count, setCount] = useState([]) const addWidget = () => { setCount([...count, data]) } const data= { labels: ['1', '2', '3', '4', '5', '6', '7' , '8', '9','10'], datasets: [ { type: 'line', label: 'Dataset 1', borderColor: 'rgb(54, 162, 235)', borderWidth: 2, data: [30, 9, 24, 50,-20,20, 17, 45, 49], } ], } return ( <div> // chart test code <Chart data = {Line_data1} options={options} style={{ position: "relative"}}/> <Chart data = {Bar_data} options={Bar_mutilLabel_options} style={{ position: "relative"}}/> {count.map(el => <><div><Chart style={{width:'10%'}} options={options} data={el}/></div></>)} <button onClick={addWidget}> Click me </button> </div> ) }Echa un vistazo a este hilo en los problemas de react-chartjs-2 ' . Específicamente el comentario de MartinP-C .
Recibí este error (nuevamente con React 18.0.1, en modo estricto) Eliminar el modo estricto detiene el error (¿porque el modo estricto invoca dos veces las funciones del ciclo de vida cuando está en modo de desarrollo? ¿Por lo tanto, reutiliza el lienzo? https://reactjs. org/docs/strict-mode.html#detecting-unexpected-side-effects )
¡Sin embargo! El modo estricto no era el problema en sí. No había registrado un componente Chart.JS y el error arrojado (""arco" no es un elemento registrado") debe haber causado que React invoque dos veces e intente reutilizar el lienzo.
La corrección del error del elemento registrado también detuvo el error "Canvas ya en uso". (Registro de componentes: https://react-chartjs-2.js.org/docs/migration-to-v4#tree-shaking )