我的 Y 轴键(或刻度)很长，它们被截断了 但这并不是因为图形本身没有足够的宽度，使用检查工具，我可以看到为它分配了足够的空间，但是分配给整个图形的框架是不够的......这应该是响应栏...

更改 X 轴的“变换”值会使文本完整显示(几乎)，但图例会被截断:

如何让它们完整显示？在文档中找不到我的答案。

这是一个重现问题的沙箱:https://codesandbox.io/s/missing-legends-text-pns6v

重要:“宽度”不是问题，它不知何故被一种白线覆盖……另外，我尝试了很多“宽度”尺寸

我指的问题是:

很想知道是否有一种方法可以换行文本，或者通过添加悬停效果来截断以显示全文

最佳答案

解决方案 1:增加 margin

您可以设置 left属性(property) margin的 ResponsiveBar .在以下示例中设置为 240px:

<ResponsiveBar
  ........
  margin={{ top: 50, right: 150, bottom: 50, left: 240 }}
  ........
/>

您还需要更新容器样式以扩展图表，例如将边距设置为 0:

style={{
    .....
    margin: "0"
}}

结果:

Sandbox

解决方案 2:工具提示

如果你不想增加 margin ，你可以覆盖 format在 axisLeft 中发挥作用 Prop 和:

• 将字符串剪成New York, Manhatta...
• 添加 <title>显示工具提示的标签:

axisLeft={{
    format: (v) => {
        return v.length > 10 ? (
            <tspan>
            {v.substring(0, 10) + "..."}
            <title>{v}</title>
            </tspan>
        ) : (
            v
        );
    },
    tickSize: 5,
    tickPadding: 5,
    tickRotation: 0,
    legend: "",
    legendPosition: "middle",
    legendOffset: -40
}}

checkout this post

Sandbox

https://stackoverflow.com/questions/66359281/