No es posible mostrar el recuento en el gráfico de barras (gráfico svg).
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:
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: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.