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

问题描述

规格：

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 horizontal barchart with long labels in YAxis 有同样的问题。您可以将其标记为重复，但也请帮助我。那些问题仍然没有被接受的答案。

解决方法

您可以使用 YAxis 道具之一 textFormatter 来实现它。此道具返回每个 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}
/>