无法在条形图上显示计数（svg 图）

Question

我目前仅使用 svg、html 和 css 制作堆叠条形图，并且没有使用第三方库。

请参考此codepenhttps://codepen.io/a166617/pen/qBXvzQd

根据堆积条形图，数据正确显示，但不显示每个条形的计数。

此堆叠条形图使用的数据如下

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

根据这些数据，我正在尝试显示计数 2（passed）、5（skipped）、22（failed）和 100（untested）

谁能告诉我如何在他们各自的条形图上显示这些计数。为了清楚起见，我想在条形图上显示计数，类似于以下屏幕截图中显示的计数

Answer 1

只需将<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> 元素重新竖直翻转。