React - одна из самых известных библиотек веб-разработки, которая разрабатывается и поддерживается Facebook и разработчиками. Легкость в освоении, хорошая документация для чтения, высокая производительность благодаря хорошей архитектуре - вот причины популярности React по сравнению с другими интерфейсными фреймворками. В разработке React компонент является ключевым фактором.
Все считается компонентами React. Это помогает повторно использовать компонент. React богат встроенными компонентами. Но для дальнейшего улучшения мы можем использовать сторонние библиотеки, которые входят в зависимость в React.
Итак, в этой статье давайте поговорим о простом способе создания диаграмм в React. Это может быть полезно для ваших проектов.
Итак, для начала вам нужно установить React на свой компьютер. Итак, вам необходимо установить Node.js на свой компьютер. Вам не нужно знать все о Node.js для работы с React. Вам просто нужно установить Node.js для работы с React. Вы можете зайти на официальный сайт Node.js и бесплатно установить подходящую версию для вашего компьютера. Вы можете выбрать последнюю версию или версию LTS. После успешной установки Node.js вы можете открыть командную строку и проверить версию Node.js на вашем компьютере.
Введите ниже код, чтобы проверить свою версию:
#check the version of the node js
node -vПосле успешной установки Node.js вы можете установить React на свой компьютер. Так что вы можете выбрать для этого два пути. Вы можете npm или пряжу к этому.
npm install --global yarnВ этом уроке я использую пряжу, но вы можете выбрать что угодно по своему вкусу. После установки React на ваш компьютер вам необходимо создать новое приложение React. Вы можете создать новую папку, запустить командную строку и ввести следующий код, чтобы создать новое приложение React.
#using npm
npx create-react-app react-graphs
#using yarn
yarn create react-app react-graphsПосле создания приложения React вам необходимо установить две библиотеки, которые помогут нам создавать красивые диаграммы. Итак, вам необходимо установить эти зависимости во вновь созданный проект.
npm i react-chartjs-2
npm install chart.js
Вам нужно использовать семантический интерфейс для дополнительных стилей. Добавление семантического UI в ваш проект также является простым шагом с помощью семантического UI CDN. Вам просто нужно вставить следующий код в файл index.html вашего проекта.
//Adding semantic UI CDN to the project <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
После успешной установки семантического пользовательского интерфейса вы можете проверить его на вкладке сети консоли разработчика. Вы можете видеть, что семантический интерфейс загружается на веб-страницу.
Затем вам нужно открыть проект из редактора кода. Вам необходимо создать дополнительный каталог под названием Components в папке src. Затем вам нужно создать две папки внутри компонентов под названием BarChart и PieChart. Затем вам нужно создать файл BarChart.js в каталоге BarChart. Затем вам нужно поместить следующий код в BarChart.js
//BarChart.js Code
import React from 'react';
import {Bar} from 'react-chartjs-2';
const state = {
labels: ['January', 'February', 'March',
'April', 'May','June','July','August','September','October','November','December'],
datasets: [
{
label: 'Average Salary Amount USD($)',
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data: [34, 65, 78, 89, 35,56,66,84,21,67,87,78]
}
]
}
export default class BarChart extends React.Component {
render() {
return (
<div>
<Bar
data={state}
options={{
title:{
display:true,
text:'Average Employee Salary per Month',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
);
}
}
Затем вам нужно создать файл PieChart.js внутри каталога PieChart. Затем вам нужно поместить следующий код в PieChart.js
//PieChart.js Code
import React from 'react';
import { Doughnut} from 'react-chartjs-2';
const state = {
labels: ['IT', 'Accounting', 'Human Resource',
'Cleaning', 'Security'],
datasets: [
{
label: 'department',
backgroundColor: [
'#B21F00',
'#C9DE00',
'#2FDE00',
'#00A6B4',
'#6800B4'
],
hoverBackgroundColor: [
'#501800',
'#4B5000',
'#175000',
'#003350',
'#35014F'
],
data: [45, 34, 80, 72, 38]
}
]
}
export default class PieChart extends React.Component {
render() {
return (
<div>
<Doughnut
data={state}
options={{
title:{
display:true,
text:'Average Employee Salary According to the Department',
fontSize:20
},
legend:{
display:true,
position:'right'
}
}}
/>
</div>
);
}
}
После создания этих файлов вам необходимо импортировать два компонента в файл app.js. Я поместил два компонента в два разных компонента div с контейнером пользовательского интерфейса в качестве className.
//App.js Code
import './App.css';
import BarChart from "./Components/Bar Chart/BarChart";
import PieChart from "./Components/Pie Chart/PieChart";
function App() {
return (
<div className="App">
<h1>React Graphs</h1>
<div>
<div className =" ui container">
<BarChart/>
</div>
<br/>
<div className =" ui container">
<PieChart/>
</div>
</div>
</div>
);
}
export default App;
Вот структура папок, которую мы будем использовать:
После того, как вы успешно выполнили шаги, вам необходимо запустить Project.
Вы можете использовать следующий код в соответствии с вашим менеджером пакетов:
#using npm npm start #using yarn yarn start
Это простая гистограмма и компонент круговой диаграммы React, которые вы можете использовать в своих проектах.
Вывод
Это простое пошаговое руководство по созданию диаграмм с помощью React. Вы можете подключить к нему серверную часть и запросить данные из базы данных для отображения на этих диаграммах в соответствии с вашими потребностями. Вам просто нужно предоставить данные для извлечения в массивы данных в BarChart .js и PieChart.js. Я думаю, вы можете поработать над этими шагами. Но в этой статье я в основном сосредоточился на том, чтобы дать вам хорошее представление о простом способе создания диаграмм в React. Думаю, эта статья поможет в вашей работе. Перейти в репозиторий можно отсюда.
Лучшее понимание компонента React очень важно для разработчика программного обеспечения. Итак, вы должны хорошо разбираться в этих вещах и уметь с ними работать. Это поможет вам сделать карьеру разработчика программного обеспечения.
Эта статья посвящена диаграммам React, используемым в современном мире в приложениях, которые, я надеюсь, помогут вам выполнить вашу работу более точно. Я хотел бы поблагодарить вас за то, что вы прочитали мою статью, я надеюсь написать больше статей на новые актуальные темы в будущем, чтобы следить за моей учетной записью, если вам понравилось то, что вы читаете сегодня!
Использованная литература:
