0
355
VistasCrear una referencia al gráfico de líneas usando react-chartjs-2
Estoy tratando de crear una referencia al gráfico que estoy construyendo con chart.js y react-chartjs-2 .
Aquí está la línea donde intento crear la referencia especificando el tipo: const chartRef = useRef<Line>(null);
Y este es el error que me sale:
'Line' refers to a value, but is being used as a type here. Did you mean 'typeof Line'?Encontré la siguiente documentación, pero como soy nuevo en TypeScript, aún no sé cómo interpretarla. Aquí está el código completo que estoy usando:
import { Line } from "react-chartjs-2"; import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend } from "chart.js"; import { useRef } from "react"; ChartJS.register( CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend ); export const data = { labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"], datasets: [ { label: "First dataset", data: [33, 53, 85, 41, 44, 65], fill: true, backgroundColor: "rgba(75,192,192,0.2)", borderColor: "rgba(75,192,192,1)" }, { label: "Second dataset", data: [33, 25, 35, 51, 54, 76], fill: false, borderColor: "#742774" } ] }; export default function App() { const chartRef = useRef<Line>(null); return ( <div className="App"> <h1>This is a chart.</h1> <Line data={data} ref={chartRef} /> </div> ); }¿Me puede apuntar en la dirección correcta? ¡Gracias!
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
No estoy muy familiarizado con ChartJS, pero cuando cambié su código existente de const chartRef = useRef<Line>(null); to const chartRef = useRef<'line'>(null); (según los documentos), el linter me dio una mejor idea de lo que debía arreglarse (en la ref ).
En tu caso:
export function App() { const chartRef = useRef<ChartJS<"line", number[], string>>(null); return ( <div className="App"> <h1>This is a chart.</h1> <Line data={data} ref={chartRef} /> </div> ); }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta