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

2024-01-15

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


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

该函数接受 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}/>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Recharts 设置显示数字的 Y 轴值基数 的相关文章

随机推荐