Recharts - 自定义 X 轴刻度 - 移动屏幕上的错误转换

Question

我正在尝试为我的 x 轴刻度设置自定义标签。它似乎在网络浏览器上工作正常，但当我旋转图标时，我无法让它在移动设备上正确定位。

这是我的标签代码：

const CustomXAxisTick = ({ x, y, payload, data }: any) => {
        const degrees = 90 // this is dynamic later
        return (
            <g transform={`translate(${x},${y})`}>
                <foreignObject x={-6} y={14} dy={20} width={20} height={20}>
                    <FaArrowUp className="w-3 h-3" style={{ transform: `rotate(${degrees}deg)` }} />
                </foreignObject>
            </g>
        )
    }

在网络上：

但是在移动设备上（看到图标移至左上角）

关于如何解决这个问题或为什么会发生这种情况有什么建议吗？

Answer 1

看起来

x

和

y

没有通过，并且由于

x={-6}

上的

y={14}

foreignObject

，您的标签呈现在左上角。防止未发送

x

或

y

值，这样就可以消除幻像标签。

---

了解为什么标签没有在正确的位置呈现。

Recharts 尝试仅显示适合所提供空间的标签。当 SVG 中剩余的内容较少时，它将隐藏它们。如果它们在 SVG 之外渲染，您将无法看到它们，因此这是预先计算和隐藏的。也有可能您的集合

width

太大/静态，从而导致重叠发生。您必须缩小自定义标签直至适合。

我要做的第一件事就是尝试在您的

interval={0}

上设置

XAxis

并增加底部的

margin

。