Привет, я пытаюсь использовать Recharts для отображения некоторых данных, но у меня возникла проблема. Числа, которые я привязываю для отображения, слишком велики, и моя ось Y обрезается веб-страницей. Есть ли у них способ установить или настроить значения оси Y для отображения 10K, 10M и т. д. Вместо 10,000 и 10,000,000 в зависимости от данных?
Не существует способа, чтобы ось 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}/>
@ CSstudent ответ верен на 100%, но вам действительно не нужно вычислять эти сокращения вручную. Вы можете использовать Библиотека js-number-abbreviate
.
Таким образом, вы могли сделать это:
import abbreviate from "number-abbreviate";
...
<YAxis tickFormatter = {abbreviate} />
Вы также можете использовать Стандартная библиотека 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
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} />
он работает нормально, только небольшое улучшение для всех return, ---> return parseInt (number / ......)