Actualmente estoy construyendo un gráfico en tiempo real para probarlo. Escribí algo para recibir datos como ejemplo, pero no funciona. A continuación se muestra mi código.
import { StreamingPlugin, ChartStreaming } from 'chartjs-plugin-streaming' import { Chart as ChartJS, LinearScale, CategoryScale, RadialLinearScale, BarElement, PointElement, LineElement, ArcElement, Legend, Tooltip } from 'chart.js' import { Chart, Line, Pie, Doughnut, Radar, getDatasetAtEvent, getElementAtEvent, getElementsAtEvent, } from 'react-chartjs-2' ChartJS.register( LinearScale, RadialLinearScale, CategoryScale, BarElement, PointElement, LineElement, ArcElement, StreamingPlugin, Legend, Tooltip ) const data = { datasets : [ { label : "real", backgroundColor : "rgb(255, 99, 132)", borderColor: "rgb(255, 99, 132)", fill : false, lineTension : 0, borderDash: [8,4], data : [], showLine: true, } ] } console.log(data.datasets[0].data) const RealTime_ChartTest_options = { elements : { line : { tesion: 0.5 } }, scales : { xAxes: [ { type: "realtime", realtime: { onRefresh: function () { data.datasets[0].data.push({ x: Date.now(), y: Math.random() * 100 } ); }, delay: 300, refresh: 300 } } ], yAxes: [ { scaleLabel: { display: true, fontFamily: "Arial", labelString: "Moment", fontSize: 20, fontColor: "#6c757d" }, ticks: { max: 100, min: 0 } } ] } } const App = ()=> { retrun( <Line data={data} options={RealTime_ChartTest_options} /> ) }Como resultado, el eje Y y las etiquetas se muestran correctamente, pero los valores no se almacenan en los datos en tiempo real y el gráfico no se dibuja.
¿Qué estoy haciendo mal en el código?
Esto se debe a que su configuración de escala es incorrecta, está usando la sintaxis V2 mientras usa V3, cambiarlo a esto debería resolver el problema:
scales: { x: { type: "realtime", realtime: { onRefresh: function() { data.datasets[0].data.push({ x: Date.now(), y: Math.random() * 100 }); }, delay: 300, refresh: 300 } }, y: { max: 100, min: 0 } }Para todos los cambios, lea la guía de migración