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

Question

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

Answer 1

您还可以使用Intl.NumberFormat()标准 JS 库。它将根据要求格式化大数字。

\n

重新绘制 Y 轴图表

\n

<YAxis\n  tickFormatter={(value) =>\n    new Intl.NumberFormat("en-US", {\n      notation: "compact",\n      compactDisplay: "short",\n    }).format(value)\n  }\n>\n

\n

示例控制台输出Intl.NumberFormat

\n

new Intl.NumberFormat(\'en-US\', {\n  notation: "compact",\n  compactDisplay: "short"\n}).format(987654321);\n// \xe2\x86\x92 988M\n

\n

Answer 2

没有办法让 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}/>