0
338
Vistasno se puede mostrar el recuento en el gráfico de barras (gráfico svg)
Actualmente estoy trabajando en un gráfico de barras apilado usando solo svg, html y css y no se usa ninguna biblioteca de terceros para esto.
Consulte este codepen https://codepen.io/a166617/pen/qBXvzQd
Según el 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, estoy tratando de mostrar el conteo 2 (para passed ), 5 (para skipped ), 22 (para failed ) y 100 (para untested )
¿Puede alguien decirme cómo mostrar estos recuentos en sus respectivos gráficos de barras? Para que quede claro, quiero mostrar el recuento en el gráfico de barras similar al que se muestra en la siguiente captura de pantalla
1 Respuestas
Responde la pregunta0
Simplemente agregue un elemento <text> a su grupo de barras.
return ( <g key={Math.random()}> <rect width={50} height={`${height}%`} fill={bar.color} x={60} // multiply with the width (50) + 10 for space y={`${y}%`} /> <text x={70} // visible centre point of your bar y={`${y + height/2}%`} dy="1.3em" // adjusts the text y position to adjust for // text descenders. Makes the vertical centring // more accurate. Normally 0.3 to -0.35, but has // an extra ~1em because of the 180deg rotate. textAnchor="middle" // centre the text horizontall at x class="bar-label" // styling for this text >{`${bar.value}%`}</text> </g> ); .bar-label { fill: white; font-size: 10px; transform-box: fill-box; transform: rotateX(180deg); } Este cambio se complica un poco por el hecho de que ha girado sus SVG de barra 180 grados. Eso hace que el texto esté al revés. Así que tengo que voltear cada elemento <text> de vuelta a la posición vertical.