如何防止 Nivo 刻度轴文本中的文本截断（条形图）

Posted 2023-02-22

【中文标题】如何防止 Nivo 刻度轴文本中的文本截断（条形图）

【英文标题】：How to prevent text truncation in Nivo ticks' axis text (Bar Chart)

【发布时间】：2021-05-27 06:25:41

【问题描述】：

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

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

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

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

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

我指的是这个问题：

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

【问题讨论】：

添加了一些额外的信息可能有助于解决这个问题

【参考方案1】：

解决方案 1：增加边距

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

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

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

style=
    .....
    margin: "0"

结果：

Sandbox

解决方案 2：工具提示

如果不想增加margin，可以覆盖axisLeftprops中的format函数和：

像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

【讨论】：

您好，非常感谢您的回答。不幸的是，这个解决方案并不一致。左边距值需要根据左轴上的最大文本长度进行更改。所以，如果我把图表放在我的网站上供用户使用，设置一个硬编码的左边距值并不能保证文本在任何时候都不会被截断。此外，将左边距值设置得太高，会完全扭曲图表，使其格式错误且难以阅读。很想听听是否有办法包装文本，或者通过添加 onHover 效果来截断以显示全文。谢谢！

谢谢！我会将此标记为答案。 2个问题：1.有没有办法换行？因为我尝试了与您所做的类似的操作，但是忽略了“\n”字符 2. 另外，我使用了“格式”，但我不知道我可以使用

@sale108 你可以看到 this post 在 svg 中创建工具提示

@sale108 用\n 包裹文本在y 轴上有点棘手。您可以使用tspan 使用<tspan x="0" y="-10"> <tspan x="0" dy="20">$text[0]</tspan> <tspan x="0" dy="40">$text[1]</tspan> </tspan> 之类的东西，但似乎从第二个到第三个新项目之间的距离不是线性的线。这在 x 轴上工作正常

@sale108 或更多类似<tspan x="0" y="0"> <tspan x="0" dy="-10">$text[0]</tspan> <tspan x="0" dy="20">$text[1]</tspan> <tspan x="0" dy="50">$text[2]</tspan> </tspan>