图表设置显示数字的Y轴值基准

Question

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

Answer 1

没有一种方法可以让Y轴自动执行操作，但是如果将数据作为整数输入到图表中，则可以将tickFormatter添加到Y轴选项卡中。您可以让tickFormatter等于一个接受1个变量的函数，该变量将是Y轴刻度值（作为一个整数），并以所需的格式返回数字。

此函数将Y轴作为一个整数并以字符串形式返回

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

@CSstudent's answer 是 100% 正确的，但您实际上不必手动计算这些缩写。您可以使用 js-number-abbreviate library。

这样，你可以这样做：

import abbreviate from "number-abbreviate";

...

<YAxis tickFormatter={abbreviate} />

Answer 3

你也可以使用JS standard library来实现类似的功能

<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