Recharts设置显示数字的Y轴值基数
Recharts set Y-axis value base of number displayed
您好,我正在尝试使用 Recharts 来显示一些数据,但我遇到了 运行 问题。我要显示的数字太大,我的 Y 轴被网页截断了。他们是根据数据设置或自定义 Y 轴值以显示 10K、10M 等而不是 10,000 和 10,000,000 的方法吗?
没有办法让 Y 轴自动执行此操作,但如果您的数据作为整数输入重新图表,您可以将 tickFormatter
添加到 Y 轴选项卡。您可以让 tickFormatter
等于一个函数,该函数接受 1 个变量,该变量将是 Y 轴刻度值(作为 int)和 return 您想要的格式的数字。
此函数将 Y 轴作为 int 接收,return将其作为字符串接收
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}/>
is 100% correct but you don't really have to calculate those abbreviations manually. You could use js-number-abbreviate
library.
这样,你可以这样做:
import abbreviate from "number-abbreviate";
...
<YAxis tickFormatter={abbreviate} />
你也可以使用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
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} />
您好,我正在尝试使用 Recharts 来显示一些数据,但我遇到了 运行 问题。我要显示的数字太大,我的 Y 轴被网页截断了。他们是根据数据设置或自定义 Y 轴值以显示 10K、10M 等而不是 10,000 和 10,000,000 的方法吗?
没有办法让 Y 轴自动执行此操作,但如果您的数据作为整数输入重新图表,您可以将 tickFormatter
添加到 Y 轴选项卡。您可以让 tickFormatter
等于一个函数,该函数接受 1 个变量,该变量将是 Y 轴刻度值(作为 int)和 return 您想要的格式的数字。
此函数将 Y 轴作为 int 接收,return将其作为字符串接收
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}/>
js-number-abbreviate
library.
这样,你可以这样做:
import abbreviate from "number-abbreviate";
...
<YAxis tickFormatter={abbreviate} />
你也可以使用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
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} />