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

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
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} />

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