Tengo una aplicación de reacción js en la que he usado una serie de puntos para trazar datos en el gráfico.
Tengo el gráfico para mostrar. Pero quiero que los datos en tiempo real se vinculen al gráfico.
Por ejemplo: si un gráfico contiene 10 puntos al cargar, se marca como gráfico. Luego, en un intervalo de 5 segundos, obtendré datos del socket que debo agregar al gráfico existente. Ahora, tiene que haber 15 puntos en los gráficos y el gráfico tiene que moverse de izquierda a derecha a medida que ingresan los datos.
Aquí está mi código que se usa para enlazar datos al principio
import { lightningChart, AxisTickStrategies, LegendBoxBuilders, Themes, PointShape, translatePoint, AxisScrollStrategies } from "@arction/lcjs"; const dateOrigin = new Date(startingDate); const chart = lightningChart() .ChartXY({ container: id, theme: Themes.lightNew, columnIndex: 0, columnSpan: 1, rowIndex: 0, rowSpan: 1 }) .setTitle(id.split(" ")[1]); const originDate = new Date(moment().subtract(1, 'days')) const xAxis = chart.getDefaultAxisX().setTickStrategy( // Use DateTime TickStrategy for this Axis AxisTickStrategies.DateTime, // Modify the DateOrigin of the TickStrategy // (tickStrategy) => tickStrategy.setDateOrigin(dateOrigin) (tickStrategy) => tickStrategy.setDateOrigin(originDate) ); const yAxis = chart .getDefaultAxisY() .fit(true) .setScrollStrategy(undefined) .setInterval(-20, 20) .setTitle(""); const series = chart .addPointSeries({ xAxis: xAxis, yAxis: yAxis, pointShape: PointShape.Circle }) .setName("Actual"); const dataFrequency = ((((600 - 600 * 250) - (60 * 60 * 100)) - (1000 * 2)) - 900) //0-24 hrs chart.getDefaultAxisX().setInterval(92 * dataFrequency, 60); series.add( sensorData.map((point) => ({ //x: new Date(point.x).getTime() - startingDate.getTime(), x: new Date(point.x).getTime() - new Date(startingDate).getTime(), y: point.y, // * 1000, })) );Indique cómo se deben agregar los datos entrantes del socket a los puntos existentes en los gráficos.
Gracias de antemano.
Puede agregar más puntos de datos a un PointSeries con otra llamada para add el método, de la misma manera que lo usa para los datos iniciales.
Así que mantenga una referencia al objeto PointSeries y cuando reciba los nuevos datos de websocket simplemente use el método add exactamente de la misma manera que lo hizo antes para agregar los datos encima de los puntos de datos anteriores.
Para "mover el gráfico de izquierda a derecha a medida que ingresan los puntos de datos", debe configurar la estrategia de desplazamiento del eje X para que sea progresiva. Consulte este ejemplo de gráfico de ECG para ver el código de referencia (línea 44, chart.getDefaultAxisX()... ).
Para completar el historial de desbordamiento de pila, también agregaré la línea de código resaltada aquí:
// Configure X Axis as progressive scrolling with value interval of 1000 chart.getDefaultAxisX().setInterval(0, 1000).setScrollStrategy(AxisScrollStrategies.progressive)