es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No es posible mostrar el recuento en el gráfico de barras (gráfico svg).

29 May, 2023 Programación

Actualmente estoy trabajando en un gráfico de barras apiladas utilizando solamente svg, html y css, y no se está utilizando ninguna biblioteca de terceros para esto.

Por favor consulte este código en Codepen: https://codepen.io/a166617/pen/qBXvzQd

En cuanto al gráfico de barras apiladas, los datos se muestran correctamente, pero no se muestra el recuento de cada barra.

Los datos utilizados para este gráfico de barras apiladas son los siguientes:

const data = [
    {
      name: 'Transit',
      passed: 2,
      skipped: 5,
      failed: 22,
      untested: 0
    },
    {
      name: 'Access',
      passed: 0,
      skipped: 0,
      failed: 0,
      untested: 100
    }
];

Según estos datos, intento mostrar un recuento de 2 (para passed), 5 (para skipped), 22 (para failed) y 100 (para untested).

¿Alguien podría decirme cómo mostrar estos recuentos en sus respectivos gráficos de barras? Para ser claro, quiero mostrar el recuento en la barra similar al que se muestra en la siguiente captura de pantalla:

enter image description here

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar las cantidades en sus respectivos gráficos de barras, es necesario agregar un elemento de texto a cada barra y posicionarlo correctamente dentro de la misma. Esto se puede lograr modificando la función createBars en el CodePen de la siguiente manera:

    function createBars() {
  // crear un grupo para cada valor de datos
  const groups = svg
    .selectAll("g")
    .data(data)
    .enter()
    .append("g")
    .attr("class", "group")
    .attr("transform", (d, i) => `translate(0,${i * (BAR_HEIGHT + BAR_GAP)})`);

  // crear un rectángulo para cada valor de datos dentro del grupo
  const rects = groups
    .selectAll("rect")
    .data((d) => Object.values(d).slice(1))
    .enter()
    .append("rect")
    .attr("class", (d, i) => `rect-${i}`)
    .attr("x", (d, i) => BAR_WIDTH * i)
    .attr("y", 0)
    .attr("width", BAR_WIDTH)
    .attr("height", BAR_HEIGHT)
    .style("fill", (d, i) => COLORS[i]);

  // agregar la cantidad para cada valor de datos
  const counts = groups
    .selectAll("text")
    .data((d) => Object.values(d).slice(1))
    .enter()
    .append("text")
    .attr("class", (d, i) => `count-${i}`)
    .text((d) => d)
    .attr("x", (d, i) => BAR_WIDTH * i + BAR_WIDTH / 2)
    .attr("y", BAR_HEIGHT / 2)
    .attr("text-anchor", "middle")
    .attr("alignment-baseline", "middle")
    .style("fill", "white");
}

    Este código agrega un elemento de texto para cada valor de datos dentro de cada grupo, lo posiciona en el centro de la barra correspondiente y establece su texto en el valor de cantidad. Tenga en cuenta que se utiliza el método Object.values para extraer los valores de cantidad de cada objeto de datos.

    Con esta modificación, el gráfico de barras apiladas ahora debería mostrar las cantidades en cada barra, como se muestra en la captura de pantalla en la pregunta.

Comments are closed.