Soy nuevo en el uso de MongoDB y REACT, y quería hacer un gráfico circular que pudiera mostrar el nombre de la categoría, así como el valor total asignado de esa categoría. Esta es una imagen de cómo se ve la base de datos.
Estoy usando recharts como biblioteca para ayudarme a crear el gráfico circular. He intentado hacerlo usando datos ficticios de una clase, pero no he podido hacer que funcione usando datos de la base de datos. Esto es lo que traté de hacer.
Cualquier ayuda es muy apreciada, gracias.
class wallet { constructor(name, balance, category) { this.name = name; this.balance = balance; this.category = category; } } const wallets = [ new wallet("Abdallah's wallet", 10000, "Work"), new wallet("Uber eats", 1000, "Food"), new wallet("University", 80000, "Work"), new wallet("Bills", 10000, "House"), ]; function App() { const dataPie = []; for (let wallet in wallets) { dataPie.push({ name: wallets[wallet].category, value: wallets[wallet].balance, }); } console.log(dataPie); return ( <div className="App"> <div> <h1>Balance of Each Category</h1> <PieChart width={400} height={400} test="hey, world!"> <Pie dataKey="value" isAnimationActive={true} data={dataPie} cx="50%" cy="50%" outerRadius={80} fill="#8884d8" label /> <Tooltip /> </PieChart> </div> </div> ); }Explicación
¿Se están produciendo errores? Con solo mirar su código, mi mejor suposición es que el problema radica en su bucle for donde está tratando de insertar los datos de la billetera en la matriz dataPie.
Lo que está tratando de hacer (supongo) es realizar un bucle for...of similar al que se muestra aquí . En este caso, la sintaxis de su ciclo for debe cambiarse donde in se reemplaza con of . A continuación, dado que wallet ya hace referencia al objeto iterable en sí, ya no necesita acceder al valor mediante index wallets[wallet] , ya que wallet tampoco es un índice.
Es posible que se haya confundido y haya intentado usar el bucle for...in aquí, que se usa para iterar a través de las propiedades de un objeto. Sin embargo, en su implementación, está intentando iterar a través de una matriz de objetos.
Tu codigo:
for (let wallet in wallets) { dataPie.push({ name: wallets[wallet].category, value: wallets[wallet].balance, }); }Mi solución:
for (let wallet of wallets) { dataPie.push({ name: wallet.category, value: wallet.balance, }); }