Визуализация данных является жизненно важным аспектом современной веб-разработки. Это позволяет пользователям легче воспринимать сложные данные и принимать обоснованные решения. В этом уроке я покажу вам, как интегрировать Recharts в ваш проект React.js и создать три различных типа диаграмм: столбчатую, линейную и круговую.

Recharts — это популярная библиотека диаграмм для React, простая в использовании и с широкими возможностями настройки. Итак, давайте погрузимся и научимся его настраивать!

Предпосылки

Чтобы следовать этому руководству, у вас должно быть:

  • Базовое понимание React.js и TypeScript
  • Node.js и npm установлены на вашем компьютере
  • Редактор кода, например Visual Studio Code.

Шаг 1: Создайте новый проект React

Во-первых, давайте создадим новый проект React с помощью инструмента командной строки Create React App. Откройте терминал и запустите:

npx create-react-app recharts-tutorial --template typescript
cd recharts-tutorial

Это создаст новый каталог с именем recharts-tutorial и инициализирует внутри него проект React на основе TypeScript.

Шаг 2: Установите Recharts

Теперь мы установим Recharts и его необходимые зависимости, используя npm. Выполните следующую команду:

npm install recharts

Шаг 3. Создайте образец набора данных

В этом руководстве мы будем использовать образец набора личных финансовых данных для создания различных типов диаграмм. Создайте новый файл с именем data.ts внутри папки src и добавьте следующий код:

export const monthlyExpenses = [
  { month: 'Jan', rent: 1200, groceries: 300, entertainment: 200 },
  { month: 'Feb', rent: 1200, groceries: 350, entertainment: 150 },
  { month: 'Mar', rent: 1200, groceries: 275, entertainment: 250 },
  // ... more data points
];

export const savingsProgress = [
  { month: 'Jan', amount: 1000 },
  { month: 'Feb', amount: 1200 },
  { month: 'Mar', amount: 1400 },
  // ... more data points
];

export const spendingCategories = [
  { name: 'Rent', value: 1200 },
  { name: 'Groceries', value: 300 },
  { name: 'Entertainment', value: 200 },
  // ... more categories
];

Шаг 4. Создайте компоненты диаграммы

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

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

В папке src создайте новый файл с именем BarChartComponent.tsx и добавьте следующий код:

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import { monthlyExpenses } from './data';

const BarChartComponent: React.FC = () => {
  return (
    <BarChart
      width={500}
      height={300}
      data={monthlyExpenses}
      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="month" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Bar dataKey="rent" fill="#8884d8" />
      <Bar dataKey="groceries" fill="#82ca9d" />
      <Bar dataKey="entertainment" fill="#ffc658" />
    </BarChart>
  );
};

export default BarChartComponent;

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

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

Затем создайте новый файл с именем LineChartComponent.tsx в папке src и добавьте следующий код:

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import { savingsProgress } from './data';

const LineChartComponent: React.FC = () => {
  return (
    <LineChart
      width={500}
      height={300}
      data={savingsProgress}
      margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="month" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="amount" stroke="#8884d8" activeDot={{ r: 8 }} />
    </LineChart>
  );
};

export default LineChartComponent;

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

Компонент круговой диаграммы

Наконец, создайте новый файл с именем PieChartComponent.tsx в папке src и добавьте следующий код:

import React from 'react';
import { PieChart, Pie, Tooltip, Legend, Cell } from 'recharts';
import { spendingCategories } from './data';

const COLORS = ['#8884d8', '#82ca9d', '#ffc658'];

const PieChartComponent: React.FC = () => {
  return (
    <PieChart width={400} height={400}>
      <Pie
        data={spendingCategories}
        cx="50%"
        cy="50%"
        outerRadius={80}
        fill="#8884d8"
        dataKey="value"
      >
        {spendingCategories.map((entry, index) => (
          <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
        ))}
      </Pie>
      <Tooltip />
      <Legend />
    </PieChart>
  );
};

export default PieChartComponent;

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

Шаг 5. Добавьте компоненты диаграммы в основное приложение.

Теперь пришло время добавить три компонента нашей диаграммы (столбик, линию и круговую диаграмму) к основному компоненту App. Откройте файл src/App.tsx и замените его содержимое следующим:

import React from 'react';
import './App.css';
import BarChartComponent from './BarChartComponent';
import LineChartComponent from './LineChartComponent';
import PieChartComponent from './PieChartComponent';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Personal Finance Data Visualization with Recharts</h1>
      </header>
      <main className="App-main" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: '20px', padding: '20px'}}>
        <section className="chart-container">
          <h2>Monthly Expenses</h2>
          <BarChartComponent />
        </section>
        <section className="chart-container">
          <h2>Savings Progress</h2>
          <LineChartComponent />
        </section>
        <section className="chart-container">
          <h2>Spending Categories</h2>
          <PieChartComponent />
        </section>
      </main>
    </div>
  );
}

export default App;

Этот код импортирует BarChartComponent, LineChartComponent и PieChartComponent и отображает их в отдельных разделах в области основного содержимого компонента App.

Теперь запустите сервер разработки, запустив npm start в терминале. Приложение React должно открыться в веб-браузере по умолчанию, отображая гистограммы, линейные и круговые диаграммы с образцами личных финансовых данных.

Поздравляем!

Вы успешно интегрировали Recharts в свой проект React.js и создали три разных типа диаграмм для визуализации личных финансовых данных.

Recharts предлагает широкий спектр типов диаграмм и вариантов настройки, поэтому не стесняйтесь изучать его документацию и еще больше улучшайте свои навыки визуализации данных.

Включив Recharts в свои проекты React.js, вы можете предоставить своим пользователям увлекательную и интерактивную визуализацию данных, помогая им принимать более обоснованные решения и улучшая их общий опыт.

Хотя это руководство послужило отправной точкой для использования Recharts в проекте React.js, важно признать, что документация Recharts невероятно доступна и хорошо написана. Не стесняйтесь копаться в нем, чтобы найти варианты, отвечающие вашим конкретным потребностям.

Работа с официальной документацией даст вам более глубокое понимание Recharts и его возможностей, что позволит вам создавать более мощные и настраиваемые визуализации данных.

На самом деле работать с документацией важнее, чем с подобными статьями. Статьи и учебные пособия могут предоставить краткие сведения и примеры для начала работы, но ничто не сравнится с глубиной и точностью официальной документации, когда вам нужно найти правильное решение для вашего проекта.

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

Удачного составления графиков!

Посетите официальную документацию Recharts