Estoy usando react-plotly para implementar un gráfico de líneas dentro de un componente funcional React como se muestra en el código a continuación. Sin embargo, cuando trato de trazar mis datos usando una matriz de valores, no muestra nada. Estoy usando scattergl porque tengo un gran conjunto de puntos de datos para mostrar. Necesito ayuda con este problema. Estoy usando react.js versión 17.0.2 y react-plotly versión 2.5.1.

Aquí está mi código:

 import React from 'react'; import Plot from 'react-plotly.js'; import mydata from '../data/allData.json'; const MyApp = () => { // Transform Data const transformData = mydata.map((d) => { let traces = []; let plot_data = []; let xx = []; let yy = []; let ss = []; ss.push(d.mydata_id) d.data.map((each) => { xx.push(each.datetime_read) yy.push(each.surge_count) }); plot_data['x'] = xx; plot_data['y'] = yy; plot_data['s'] = ss; // console.log("Plot Data: ", plot_data) traces.push({ x: plot_data['x'], y: plot_data['y'], type: 'scattergl', marker: {color: 'green'}, name: plot_data['s'] }); return traces }); return ( <div> <div> <Plot data={transformData} layout={{...}} /> </div> </div> ) };

Aquí están mis datos:

 [ { "mydata_id": "00175784", ... "data": [ { "datetime_read": "2022-03-16 03:15:00", ... "surge_count": "240" }, { ... } ] }, { "mydata_id": "00161784", ... "data": [ { "datetime_read": "2022-03-16 03:20:00", ... "surge_count": "194" }, { "datetime_read": "2022-03-16 03:15:00", ... "surge_count": "342" }, { ... } ] } ]

También me gustaría señalar que cuando trato de mostrar datos específicos en la matriz con data={transformData[2]} , funciona bien. Pero mi objetivo es mostrar todos los datos en la matriz transformData .