如果标签太长，如何设置 YAxis 重新图表的样式以使其省略？

Question

规格：

1. 重新图表版本：2.0.9
2. ReactJS 版本：17.0.2
3. 浏览器：Chrome 版本 91.0.4472.77（官方版本）(x86_64)
4. 操作系统：MacOS

背景：

我正在尝试使用recharts包来创建图表。我已经非常接近我的目标了。但是，如果标签太长，我会坚持设计 YAxis 标签的样式以使其省略。

当前的状况：

正如您所看到的，它与其他数据重叠。我知道我可以减小字体大小或将宽度设置得更大。但是，问题是，YAxis 标签是动态的，并且可能很长。这是当前代码https://codesandbox.io/s/simple-bar-chart-forked-72z60?file=/src/App.tsx

客观的：

我想让 YAxis 标签显示“这是长标签并且...”（如果太长则显示三个点），类似于使用省略号。

顺便说一句，我有与此问题Dynamic height for Recharts Horizo​​ntal barchart with long labels in YAxis相同的问题。您可以将其标记为重复，但也请帮助我。这些问题仍然没有得到接受的答案。

Answer 1

您可以使用其中一种YAxis道具来实现它，tickFormatter. 该属性返回每个YAxis值及其索引。另外，这个 props 需要一个字符串作为返回值，它是格式化的 YAxis 标签。这个想法有点像这样：

tickFormatter = (value: string, index: number) => {
   const limit = 20; // put your maximum character
   if (value.length < limit) return value;
   return `${value.substring(0, limit)}...`;
};

<YAxis
   width={150}
   tickFormatter={tickFormatter}
/>