SVG堆叠柱状图x轴标签重叠如何旋转调整实现清晰显示

解决方案 #

你使用的rotateX(90deg)属于3D旋转属性，会让标签绕水平X轴旋转90度后与画布垂直，因此无法正常显示。你需要的是2D平面旋转，调整方案如下：

• 替换旋转属性为rotate()，角度设置为-30°_{-45°（向左倾斜）或30°}45°（向右倾斜）即可，避免角度过大影响阅读
• 调整旋转原点transform-origin为标签自身的坐标，避免旋转后标签位置偏移出预设区域
• 适当下调标签的y轴坐标，同时可将textAnchor改为end，让倾斜后的标签尾部对齐刻度，视觉更规整

修改后的代码示例：

<text
  x={125 + rowIndex * 60}
  y={540} // 原y值520向下偏移20px，避免旋转后和x轴重叠
  textAnchor="end"
  style={{ 
    fill: 'red',
    fontSize: '13px',
    transform: `rotate(-45deg)`,
    transformOrigin: `${125 + rowIndex * 60}px 540px` // 旋转原点对齐文字自身坐标，避免偏移
  }}
>{entry.name}</text>

可选优化 #

如果调整角度后仍存在重叠，可做进一步优化：

• 适当增大x轴刻度间距，将代码中rowIndex * 60的系数调整到70~80
• 标签数量过多时，可设置为间隔显示标签，进一步降低密度

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