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

Question

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

Answer 1

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

Answer 2

也可以使用JS 标准库来实现类似的功能

<YAxis tickFormatter={(value) => new Intl.NumberFormat('en', { notation: "compact", compactDisplay: "short" }).format(value)} />

new Intl.NumberFormat('en-GB', {
  notation: "compact",
  compactDisplay: "short"
}).format(987654321);
// → 988M

Answer 3

@CSstudent 的答案是 100% 正确的，但您实际上不必手动计算这些缩写。你可以使用js-number-abbreviatelibrary。

这样，您可以这样做：

import abbreviate from "number-abbreviate";

...

<YAxis tickFormatter={abbreviate} />

Answer 4

 let kFormatter = (num) => {
        return Math.abs(num) > 999
         ? Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + "k"
         : Math.sign(num) * Math.abs(num);
    };
    <YAxis  dataKey="Y1" label={{ value: 'Y1'}} tickFormatter={kFormatter} />