0
309
VistasCómo crear un gráfico de líneas simple con datos de respuesta json
Obtengo datos de cambio de precio de un extremo de la API y obtengo esta respuesta de axios
0: (2) [1639382650242, 48759.49757943229] 1: (2) [1639386250855, 49131.24712464529] 2: (2) [1639389730718, 48952.65930253478] 3: (2) [1639393442318, 48821.67463307133] 4: (2) [1639396908986, 48835.214009032316] 5: (2) [1639400493105, 48618.25814914513] 6: (2) [1639404186695, 48572.06354948456] 7: (2) [1639407821756, 47974.48879991822] 8: (2) [1639411648037, 47105.42054562465] 9: (2) [1639414998352, 47176.56337927206]Intenté usar este código de ejemplo de los documentos para representar un gráfico de líneas simple, pero dice que debo tener al menos 2 columnas de datos:
<Chart width={'600px'} height={'400px'} chartType="Line" loader={<div>Loading Chart</div>} data={ historicData.prices } />¿Hay alguna manera de hacer que funcione con google-react-charts?
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Agregue time y price como etiquetas a la primera entrada. Puede convertir marcas de tiempo en objetos de fecha real.
export default function App() { const data = [ [1639382650242, 48759.49757943229], [1639386250855, 49131.24712464529], [1639389730718, 48952.65930253478], [1639393442318, 48821.67463307133], [1639396908986, 48835.214009032316], [1639400493105, 48618.25814914513], [1639404186695, 48572.06354948456], [1639407821756, 47974.48879991822], [1639411648037, 47105.42054562465], [1639414998352, 47176.56337927206] ]; const processedData = [[{ type: "date", label: "time" }, "price"]].concat( data.map(([timestamp, price]) => { return [new Date(timestamp), price]; }) ); return ( <div className="App"> <Chart width={"600px"} height={"400px"} chartType="Line" loader={<div>Loading Chart</div>} data={processedData} /> </div> ); }Caja de arena de código => https://codesandbox.io/s/busy-johnson-1xc0w?file=/src/App.js
·
Juan Pablo Isaza
Denunciar
0
Por favor marque ¿Se ha perdido estas etiquetas en la sección de datos según la imagen de arriba?
·
Juan Pablo Isaza
Denunciar
Responde la pregunta