我目前正在使用僅使用 svg、html 和 css 的堆疊條形圖，并且沒有為此使用第三方庫。
請參考這個codepen 
uj5u.com熱心網友回復：
只需將一個<text>元素添加到您的酒吧組中。
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);
}
由于您將條形 SVG 旋轉了 180 度，因此這種更改有點復雜。這會導致文本顛倒。所以我必須將每個<text>元素翻轉回來。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/366439.html
標籤：javascript html css 反应 svg