如何防止 Nivo 刻度轴文本条形图中的文本截断 方案一：增加保证金解决方案 2：工具提示

如何解决如何防止 Nivo 刻度轴文本条形图中的文本截断 方案一：增加保证金解决方案 2：工具提示

我的 Y 轴键（或刻度）很长，它们被截断了 但这不是由于图形本身缺乏足够的宽度，使用检查工具，我可以看到为它分配了足够的空间，但是分配给整个图形的框架不够......而且应该是响应栏...

更改 X 轴的“变换”值会使文本完整显示（几乎），但随后图例被截断：

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

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

重要：“宽度”不是问题，它以某种方式被一条白线覆盖......此外，我尝试了许多“宽度”尺寸

我所指的问题是：

很想知道是否有办法包装文本，或者通过添加悬停效果截断以显示全文

解决方法

方案一：增加保证金

您可以在 left 的 margin 中设置 ResponsiveBar 属性。在以下示例中设置为 240px：

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

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

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

结果：

Sandbox

解决方案 2：工具提示

如果不想增加边距，可以覆盖format props中的axisLeft函数和：

• 像 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