Визуализация данных является жизненно важным аспектом современной веб-разработки. Это позволяет пользователям легче воспринимать сложные данные и принимать обоснованные решения. В этом уроке я покажу вам, как интегрировать 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
- ✌️Если вы планируете подписаться на Medium, пожалуйста, не стесняйтесь использовать эту ссылку. Вам ничего не будет стоить, а мне очень поможет
- 👏 Хлопайте в ладоши, чтобы эта статья попала в топ
- 🔔Подпишитесь на меня в Медиуме