0
161
VistasReaccionar chartsJS transmisión de datos en vivo
Estoy tratando de crear una transmisión de datos en vivo de React ChartsJS usando Chartjs . Logré representar el lienzo en la página, pero por alguna razón, todavía no puedo moverme como los datos de un gráfico de líneas en vivo. No estoy seguro si necesito incrustar algo. a la página HTML. instalo esos paquetes: chart.js "chartjs-adapter-luxon": "^1.1.0 "chartjs-plugin-streaming": "^2.0.0" ¡Espero que alguien me pueda ayudar!
import React from "react"; import { Line } from "react-chartjs-2"; import Chart from "chart.js/auto"; import { StreamingPlugin, RealTimeScale } from "chartjs-plugin-streaming"; Chart.register(StreamingPlugin, RealTimeScale); export const IotChart = () => { const data = { datasets: [ { label: "Dataset 1", fill: false, lineTension: 0.4, backgroundColor: "#f44336", borderColor: "#f44336", borderJoinStyle: "miter", pointRadius: 0, showLine: true, data: [] as any, }, ], }; const options = { 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, }, }, ], }, } as any; return ( <div> <div> <Line data={data} options={options} width={400} height={200} /> </div> </div> ); }; 
1 Respuestas
Responde la pregunta0
Esto se debe a que define sus escalas como matrices en lugar de objetos. Esto se cambió en V3, para todos los cambios, lea la guía de migración porque hay muchos más cambios importantes, por ejemplo, la declaración de la fuente de la etiqueta de la escala del eje Y.
Si revisa la documentación / ejemplos de transmisión, también verá que está definido como objetos.
Entonces, cambiar a esto solucionará su problema:
scales: { x: { type: "realtime", realtime: { onRefresh: function() { data.datasets[0].data.push({ x: Date.now(), y: Math.random() * 100, }); }, delay: 300, refresh: 300, }, }, }