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

Question

规格：

Recharts 版本：2.0.9
ReactJS 版本：17.0.2
浏览器：Chrome版本 91.0.4472.77（正式版）(x86_64)
OS: MacOS

背景：

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

当前状况：

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

Objective:

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

顺便说一句，我和这个问题有同样的问题Dynamic height for Recharts horizontal barchart with long labels in YAxis。您可以将此标记为重复，但也请帮助我。这些问题还没有被接受的答案。

Answer 1

您可以使用 YAxis 道具之一 tickFormatter 来实现它。此道具 return 每个 YAxis 值及其索引。此外，此道具需要一个字符串作为 return 值，它是格式化的 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}
/>

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

How to style YAxis recharts to make it ellipsis if label too long?

reactjs

recharts