Как создать диаграмму в React с помощью Recharts


Введение

Визуализация данных всегда была жизненно важным компонентом программной инженерии, особенно в цикле разработки front-end. Для наших пользователей полезно понимать, что происходит, визуализируя данные в наших приложениях.

Recharts — это композитная библиотека диаграмм, построенная на компонентах React. Она позволяет легко и просто интегрировать графики в наше React-приложение.

В этой статье мы покажем вам, как использовать Recharts в простом приложении с помощью ReactJS.

Мы создадим приложение, которое будет получать цены на криптовалюты из API и отображать их в виде гистограммы, а не придумывать свою диаграмму данных.

С помощью API CoinCap мы сможем получать цены на криптовалюты в реальном времени для нашего React-приложения.

Необходимые условия

Чтобы следовать этому примеру, вам понадобится следующее:

  • Node.js версии 16.16.0, установленный на вашем компьютере.
  • Новый проект React, созданный с помощьюCreate React App
  • IDE или текстовый редактор на ваш выбор, например, Sublime Text или Visual Studio Code.

Настройка нашего проекта React

Мы создадим наш проект, следуя шагу, описанному в первом шаге выше. Давайте начнем, выполнив следующую команду:

npx create-react-app react-recharts-tutorial

Теперь перейдем в каталог проекта, выполнив команду:

cd react-recharts-tutorial

Я решил назвать проект react-recharts-tutorial, потому что мы изучаем работу Recharts в React.

В настоящее время структура моего проекта выглядит следующим образом.

Установка Recharts в наше приложение React

Чтобы установить Recharts, мы выполним следующую команду:

npm install recharts

Необходимо проверить зависимости в файле package.json, чтобы убедиться, что Recharts был установлен.

Вот текущее состояние моих зависимостей.


//...

  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "recharts": "^2.1.13",
    "web-vitals": "^2.1.4"
  },

  //...


Вход в полноэкранный режим Выход из полноэкранного режима

Очистка кода React

Команда create react app быстро загружает приложение React, но нам нужно изменить его под наш случай использования, поскольку нам не нужны все возможности, которые оно предоставляет.
В данном случае нам не нужны App.css или logo.svg в папке src. Мы можем удалить весь код в App.js.

Получение данных

В App.js мы получим данные из API и передадим их в отдельный компонент, который отрисует график. Давайте заменим содержимое App.js на код ниже:

import { useEffect, useState } from "react";

export default function App() {
  const [data, setdata] = useState();

  useEffect(() => {
    const fetchDatas = async () => {
      const res = await fetch("https://api.coincap.io/v2/assets/?limit=20");
      const data = await res.json();
      console.log(data);
      setdata(data?.data);
    };
    fetchDatas();
  }, []);

  return <div className="App">How to use Recharts with React</div>;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Я написал функцию fetchData, которая запрашивает API CoinCap.

По умолчанию API возвращает свойство данных со 100 криптовалютными объектами. Чтобы запросить только первые двадцать объектов, хранящихся в нашем состоянии данных, я добавил параметр limit в конце URL.

Кроме того, fetchData была вызвана в хуке useEffect с пустым массивом зависимостей, что указывает на то, что функция выполняется, как только монтируется компонент App.

Следующим шагом будет запуск нашего приложения:

npm start

У нас должно получиться что-то похожее на изображение ниже.

Давайте посмотрим, как выглядят данные, которые мы извлекли, в консоли:

У нас должно получиться что-то похожее на изображение ниже.

Для создания нашей диаграммы нам понадобятся только свойства name и priceUsd из данных.

Компонент диаграммы

В каталоге src создадим файл Chart.js и добавим приведенный ниже код:

import {
  BarChart,
  Bar,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer,
} from "recharts";

export default function Chart({ data }) {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <BarChart
        data={data}
        margin={{
          top: 5,
          right: 30,
          left: 20,
          bottom: 5,
        }}
      >
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Bar dataKey="name" fill="#8884d8" />
        <Bar dataKey="priceUsd" fill="#82ca9d" />
      </BarChart>
    </ResponsiveContainer>
  );
}
Вход в полноэкранный режим Выйти из полноэкранного режима

В нашем Chart. js мы импортируем следующие компоненты из Recharts BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer для представления данных. Также мы передали наши data в качестве реквизита.

Далее мы добавляем наш компонент Chart.js в наш файл app.js и передаем наши data
состояние в Chart.js в качестве prop..


import { useEffect, useState } from "react";
import Chart from "./Chart";

export default function App() {
  const [data, setdata] = useState();

  useEffect(() => {
    const fetchDatas = async () => {
      const res = await fetch("https://api.coincap.io/v2/assets/?limit=20");
      const data = await res.json();
      console.log(data);
      setdata(data?.data);
    };
    fetchDatas();
  }, []);

  return (
    <div className="App">
      How to use Recharts with React
      <Chart data={data} />
    </div>
  );
}
Войдите в полноэкранный режим Выйти из полноэкранного режима

Чтобы запустить наш окончательный код, мы можем выполнить следующие шаги:

npm start

У нас должно получиться что-то похожее на изображение ниже.

Заключение

Эта статья показывает, как отображать графики на веб-сайтах с помощью Recharts и React, но она идет гораздо дальше.

Для получения дополнительной информации о Recharts и других способах настройки графиков посетите сайт Recharts.

Спасибо за прочтение 🌟🎉

Рад видеть, что вам понравилась эта статья. Пожалуйста, дайте мне знать, что вы думаете в разделе комментариев.

Я буду рад пообщаться с вами в Twitter.

В другой блог, в другой день, до тех пор Femi👋.

Оцените статью
devanswers.ru
Добавить комментарий