Как отсортировать значения в Rechart по оси X в порядке возрастания

У меня есть 3 демонстрационных набора данных для визуализации в React с использованием Recharts.js.

{ x: 80, y: 50, name: "Page A" },
{ x: 14, y: 80, name: "Page B" },
{ x: 70, y: 38, name: "Page C" },

К сожалению, значения по оси x не упорядочены правильно (80 -> 14 -> 70), а следуют порядку объектов в массиве данных.

const rechart = () => {
  return (
    <div>
      <ScatterChart width = {400} height = {400} data = {data}>
        <XAxis dataKey = "x" domain = {[0, 100]} />
        <YAxis dataKey = "y" domain = {[0, 100]} axisLine = {false} tick = {false} />
        <Scatter data = {data}>
          <LabelList dataKey = "name" position = "right" />
        </Scatter>
      </ScatterChart>
    </div>
  );
};

Что я могу сделать, чтобы отсортировать значения от 0 до 100, а не от страницы A до страницы C?

reactjs recharts

18.03.2022 18:51

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

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

Ответы 1

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

Попробуйте отсортировать свои данные, прежде чем передавать их в качестве реквизита компоненту Scatter.

data.sort((a,b) => a.x - b.x)

const rechart = () => {
  const sortedData = data.sort((a,b) => a.x - b.x)
  return (
    <div>
      <ScatterChart width = {400} height = {400} data = {data}>
        <XAxis dataKey = "x" domain = {[0, 100]} />
        <YAxis dataKey = "y" domain = {[0, 100]} axisLine = {false} tick = {false} />
        <Scatter data = {sortedData}>
          <LabelList dataKey = "name" position = "right" />
        </Scatter>
      </ScatterChart>
    </div>
  );
};

18.03.2022 19:00

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

Вращение <text> не вращается в своей позиции

React - Rechart - Как заполнить нижнюю часть области в составленной диаграмме (Rechart.js)?

Как отключить анимацию для LineChart в recharts?

Визуализация данных Google Analytics в React.js, редактирование json

Как обновить значение в render() в React?

Rechart - добавление меток к графикам

Recharts.js ResponsiveContainer показывает пробелы, похожие на отступы

Recharts: не отображается при двойном цикле внутри гистограммы

Наложение текста поверх диаграммы Recharts

Выбор диапазона по оси X в Recharts

Как отсортировать значения в Rechart по оси X в порядке возрастания

Ответы 1

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

Похожие вопросы