Tengo dos columnas de datos en mi archivo csv llamadas "beneficio" e "ingresos". Actualmente, estoy mostrando solo "beneficio" como un gráfico de barras simple. Sin embargo, deseo agrupar la otra columna de datos, es decir, "ingresos" junto con "beneficio" y convertirla en un gráfico de barras agrupadas.
Aquí están mis datos csv:
month,revenue,profit January,123432,80342 February,19342,10342 March,17443,15423 April,26342,18432 May,34213,29434 June,50321,45343 July,54273,80002Y aquí está mi código en Plunker:
https://plnkr.co/edit/UaL3urb5L41uN1e2?open=lib%2Fscript.js&preview
Agradecería si alguien pudiera ayudarme con esto. ¡Gracias por adelantado!
Ok, esta es una respuesta cruda, pero te permitirá desarrollar más lo que quieras. Solo necesita jugar con los anchos de las barras para acomodar dos barras por mes. https://plnkr.co/edit/K9LVNpFPmXFIGufM?preview
const rects = g.selectAll("rect.profit") .data(data) rects.exit().remove() rects .attr("y", d => y(d.profit)) .attr("x", (d) => x(d.month)) .attr("width", 0.5 * x.bandwidth()) .attr("height", d => HEIGHT - y(d.profit)) rects.enter().append("rect") .attr("class", "profit") .attr("y", d => y(d.profit)) .attr("x", (d) => x(d.month)) .attr("width", 0.5 * x.bandwidth()) .attr("height", d => HEIGHT - y(d.profit)) .attr("fill", "grey") const rects_revenue = g.selectAll("rect.revenue") .data(data) rects_revenue.exit().remove() rects_revenue .attr("y", d => y(d.revenue)) .attr("x", (d) => x(d.month)) .attr("width", 0.5 * x.bandwidth()) .attr("height", d => HEIGHT - y(d.revenue)) rects_revenue.enter().append("rect") .attr("class", "revenue") .style("fill", "red") .attr("y", d => y(d.revenue)) .attr("x", (d) => x(d.month) + 0.5 * x.bandwidth()) .attr("width", 0.5 * x.bandwidth()) .attr("height", d => HEIGHT - y(d.revenue)) .attr("fill", "grey")