Повторные диаграммы устанавливают значение оси y на основе отображаемых чисел

Привет, я пытаюсь использовать Recharts для отображения некоторых данных, но у меня возникла проблема. Числа, которые я привязываю для отображения, слишком велики, и моя ось Y обрезается веб-страницей. Есть ли у них способ установить или настроить значения оси Y для отображения 10K, 10M и т. д. Вместо 10,000 и 10,000,000 в зависимости от данных?

enter image description here

4
0
4 595
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Не существует способа, чтобы ось 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}/>

он работает нормально, только небольшое улучшение для всех return, ---> return parseInt (number / ......)

Somnath Kadam 06.05.2021 21:27

@ 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} />

Другие вопросы по теме