¿Existe algún método para mapear o representar datos de una API en un gráfico en ReactJS?
Estoy utilizando datos de la API para mostrarlos en una representación gráfica utilizando React Charts.
Los datos de la API se ven así:
0:
CPSA: “0.00”
CRSA: “0.00”
XBA: “0.00”
XSA: “0.00”
audbal: “1.00”
audnet: “1.00”
date: “2021-12-25T05:31:40.497Z”
xnaaud: “0.0100000000”
xnabal: “100.0000000000”
__v: 0
_id: “617d00f1e85e769931f42483”
1:
CPSA: “11.81”
CRSA: “40.95”
XBA: “20.00”
XSA: “0.00”
audbal: “73.76”
audnet: “72.76”
date: “2021-12-25T06:11:14.824Z”
xnaaud: “0.0119063760”
xnabal: “6195.0000000000”
__v: 0
_id: “61c6b6025547fdf4cd6ecb6c”
Quiero mapear los atributos xnaaud y date en el gráfico.
Estoy utilizando el siguiente código:
const [Data, setData] = useState([]);
const data = {
labels: [Data.date],
datasets: [
{
label: ‘XNA/AUD’,
fill: false,
lineTension: 0.0,
backgroundColor: ‘rgb(41, 33, 116,0.5)’,
borderColor: ‘rgb(41, 33, 116,0.5)’,
pointHitRadius: 20,
data:[parseFloat(Data.xnaaud)],
},
]
};
useEffect(() => {
async function fetchBooks() {
const response = await fetch(‘/audlogget’);
const json = await response.json();
setData(json.al);
console.log(json.al)
}
fetchBooks();
},[]);
if(!Data)
{
return
}
return (
)
}
Pero el problema es que los valores no se representan en el gráfico. El gráfico no muestra nada cuando se utilizan los datos de la API, pero cuando se le dan valores estáticos a las etiquetas y datos, funciona.
¿Cuál es el problema en el código?
davy.ai
El problema con el código es que está tratando de acceder a los valores de Data (fecha y xnaaud) antes de que se carguen desde la API. Dado que useState y useEffect son asíncronos, la función de renderizado se ejecuta antes de que se carguen los datos de la API, por lo que el gráfico no muestra ningún dato.
Para solucionar este problema, debes asegurarte de que los datos de la API se carguen antes de renderizar el gráfico. Una forma de hacer esto es utilizar un renderizado condicional, donde solo se renderiza el gráfico cuando el estado Data se haya actualizado con los datos de la API.
Puedes actualizar el código de la siguiente manera:
En este código, se están obteniendo los datos de la API y estableciéndolos en el estado Data utilizando la función setData. Después de eso, se crea el objeto chartData con las etiquetas y los datos mapeados desde los datos de la API.
El renderizado condicional verifica si el estado Data es nulo y, si lo es, muestra el componente Loading. Cuando se cargan los datos de la API y se actualiza el estado Data, el gráfico se renderizará con el objeto chartData.