如何解决如果标签太长，如何设置 YAxis 重新图表的样式以使其省略？
规格：
- 记录版本：2.0.9
- ReactJS 版本：17.0.2
- 浏览器：Chrome 版本 91.0.4472.77（官方版本）(x86_64)
- 操作系统：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}
/>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。