gpt4 book ai didi

reactjs - Recharts 设置显示数字的 Y 轴值基数

转载 作者:行者123 更新时间:2023-12-04 12:11:46 31 4
gpt4 key购买 nike

嗨,我正在尝试使用 Recharts 来显示一些数据,但我遇到了问题。我要显示的数字太大,我的 Y 轴被网页截断了。他们是否可以根据数据设置或自定义 Y 轴值以显示 10K、10M 等而不是 10,000 和 10,000,000?

enter image description here

最佳答案

没有办法让 Y 轴自动执行此操作,但是如果您的数据以整数形式输入到图表中,您可以添加 tickFormatter到 Y 轴选项卡。您可以拥有 tickFormatter等于一个函数,该函数接受 1 个变量,该变量将是 Y 轴刻度值(作为整数)并以您想要的格式返回数字。

此函数将 Y 轴作为 int 并将其作为字符串返回

const DataFormater = (number) => {
if(number > 1000000000){
return (number/1000000000).toString() + 'B';
}else if(number > 1000000){
return (number/1000000).toString() + 'M';
}else if(number > 1000){
return (number/1000).toString() + 'K';
}else{
return number.toString();
}
}

在面积图中 <YAxis tickFormatter={DataFormater}/>

关于reactjs - Recharts 设置显示数字的 Y 轴值基数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52320447/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com