Привет, я пытаюсь использовать 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}/>
Вы также можете использовать стандартную библиотеку 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
Ответ @ CSstudent верен на 100%, но вам действительно не нужно вычислять эти сокращения вручную. Вы можете использовать js-number-abbreviate библиотеку.
Таким образом, вы могли сделать это:
import abbreviate from "number-abbreviate";
...
<YAxis tickFormatter={abbreviate} />
