SVG图表添加动态X轴标签后无法显示问题求助

问题原因 #

• 你直接将HTML的<div>元素插入到了SVG内部，浏览器不会识别SVG里的普通HTML标签，这段内容会被直接忽略，所以看不到X轴标签。
• 你把标签渲染逻辑放在了entry.bars.map循环内部，每个entry下有多少个柱子就会重复渲染多少次名字，逻辑也不合理。

解决方法 #

1. 替换标签元素：用SVG原生的<text>标签代替<div>来渲染X轴文本
2. 调整渲染位置：把X轴标签的渲染逻辑从柱子循环中移出来，每个entry只渲染一次名字
3. 调整SVG尺寸：把SVG的高度调大至少30px，预留出底部放X轴标签的空间，避免标签被裁切

修改后的代码示例 #

const rows = (entry, rowIndex) => {
    // 先渲染当前entry对应的所有柱子
    const barList = entry.bars.map((bar, index) => {
      console.log('bar', entry, bar)
      const graphHeight = 490 - 5;
      const height = (bar.value / entry.total) * graphHeight;
      const y = (bar.y / entry.total) * graphHeight;
      return (
        <g key={Math.random()}>
          <rect
            width={50}
            height={height}
            fill={bar.color}
            x={100 + rowIndex * 60}
            y={490 - y - height}
          />
          <text
            x={125 + rowIndex * 60}
            y={490 - y - height/2}
            dy="0.5em"
            textAnchor="middle"
            class="bar-label" 
            style={{ fill: 'white', fontSize: '12px' }}
          >{`${bar.color === '#ffcc00' && bar.value === 100 ? 'X': bar.value}`}</text>
        </g>
      );
    });

    // 追加当前entry对应的X轴标签，仅渲染一次
    barList.push(
      <text
        key={`x-label-${rowIndex}`}
        x={125 + rowIndex * 60}
        y={510}
        textAnchor="middle"
        style={{ fill: '#333', fontSize: '14px' }}
      >{entry.name}</text>
    )
    return barList;
};

调整完后就能看到X轴的名字标签和参考效果一致了，如果位置不合适可以自行调整<text>标签的y属性数值。

内容的提问来源于stack exchange，提问作者Aren Trot