🏆 151 ΠΊΡΡΡ Π·Π° 1 ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΡ: Ρ Π²Π°ΡΠΈΡ Π²ΡΠ±ΠΈΡΠ°ΡΡ β Π±Π΅ΡΠΈ Π²ΡΠ΅ ΠΈ ΡΡΠ°Π·Ρ!

ΠΠ΄ΠΈΠ½ ΠΊΠ»ΠΈΠΊ β 151 Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ. ΠΠΎΠ΄ΠΏΠΈΡΠΈΡΡ Π½Π° OTUS ΡΠ΅ΠΉΡΠ°Ρ!
Π’Π΅Ρ Π½ΠΎΠΌΠΈΡ ΠΌΡΠΈΡΡΡ Π²ΠΏΠ΅ΡΠ΅Π΄, Π° Π²ΠΌΠ΅ΡΡΠ΅ Ρ Π½ΠΈΠΌΠΈ ΡΠ°ΡΡΡΡ ΠΈ ΡΡΠ΅Π±ΠΎΠ²Π°Π½ΠΈΡ ΠΊ ΡΠΏΠ΅ΡΠΈΠ°Π»ΠΈΡΡΠ°ΠΌ. OTUS ΠΏΡΠΈΠ΄ΡΠΌΠ°Π» ΠΊΡΡΡΡΡ ΡΡΡΠΊΡ β ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΡ Π½Π° 151 ΠΊΡΡΡ ΠΏΠΎ Π²ΡΠ΅ΠΌ ΠΊΠ»ΡΡΠ΅Π²ΡΠΌ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡΠΌ IT!
-
ΠΠΎΡΠ΅ΠΌΡ ΠΏΠΎΠ΄ΠΏΠΈΡΠΊΠ° OTUS ΠΌΠ΅Π½ΡΠ΅Ρ ΠΏΡΠ°Π²ΠΈΠ»Π° ΠΈΠ³ΡΡ:
- ΠΠΎΡΡΡΠΏ ΠΊ 151 ΠΊΡΡΡΡ ΠΎΡ ΠΏΡΠ°ΠΊΡΠΈΠΊΡΡΡΠΈΡ ΡΠΊΡΠΏΠ΅ΡΡΠΎΠ²
- Π 3 ΡΠ°Π·Π° Π²ΡΠ³ΠΎΠ΄Π½Π΅Π΅, ΡΠ΅ΠΌ ΠΏΠΎΠΊΡΠΏΠ°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΊΡΡΡ ΠΎΡΠ΄Π΅Π»ΡΠ½ΠΎ
- ΠΠΎ 3 ΠΊΡΡΡΠΎΠ² ΠΎΠ΄Π½ΠΎΠ²ΡΠ΅ΠΌΠ΅Π½Π½ΠΎ Π±Π΅Π· Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡΠ΅Π»ΡΠ½ΡΡ Π·Π°ΡΡΠ°Ρ
- Π‘Π²ΠΎΠ±ΠΎΠ΄Π° Π²ΡΠ±ΠΎΡΠ° Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ β ΠΌΠ΅Π½ΡΠΉ ΡΡΠ΅ΠΊΠΈ ΠΊΠΎΠ³Π΄Π° ΡΠ³ΠΎΠ΄Π½ΠΎ
ΠΠ·ΡΡΠ°ΠΉ Π½ΠΎΠ²ΠΎΠ΅, ΡΠ°Π·Π²ΠΈΠ²Π°ΠΉΡΡ Π² ΡΠ²ΠΎΠ΅ΠΌ ΡΠ΅ΠΌΠΏΠ΅, ΠΌΠ΅Π½ΡΠΉ Π½Π°ΠΏΡΠ°Π²Π»Π΅Π½ΠΈΡ β ΠΏΠΎΠ΄ΠΏΠΈΡΠΈΡΡ Π½Π° OTUS ΠΈ ΠΏΡΠΎΠΊΠ°ΡΠΈΠ²Π°ΠΉ ΡΠΊΠΈΠ»Ρ ΠΏΠΎ ΠΏΠΎΠ»Π½ΠΎΠΉ!
Π Π΅ΠΊΠ»Π°ΠΌΠ°. ΠΠΠ Β«ΠΡΡΡ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΎΠ±ΡΠ°Π·ΠΎΠ²Π°Π½ΠΈΠ΅Β», ΠΠΠ Π 1177746618576. Erid 2VtzqupFnNL
Π§ΡΠΎ ΡΠ°ΠΊΠΎΠ΅ chart.js?
- Chart.js β ΠΎΠ΄Π½Π° ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠΏΡΠ»ΡΡΠ½ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊ JavaScript Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ.
- Π Π½Π΅ΠΉ Π΅ΡΡΡ Π²ΡΠ΅ Π½Π΅ΠΎΠ±Ρ ΠΎΠ΄ΠΈΠΌΠΎΠ΅ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ ΠΊΠ°ΠΊ ΠΏΡΠΎΡΡΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ (Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ ΠΈΠ»ΠΈ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ), ΡΠ°ΠΊ ΠΈ ΡΠ»ΠΎΠΆΠ½ΡΡ , Π²ΡΠΎΠ΄Π΅ Π»Π΅ΠΏΠ΅ΡΡΠΊΠΎΠ²ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, Π½Π΅Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ² ΠΈ Ρ. ΠΏ.
- Π’Π°ΠΊΠΆΠ΅ Π΅ΡΡΡ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡΡ Π½Π°ΡΡΡΠ°ΠΈΠ²Π°ΡΡ ΡΠ²Π΅ΡΠ°, ΡΡΠΈΠ»ΠΈ ΠΈ Π²ΡΠΏΠ»ΡΠ²Π°ΡΡΠΈΠ΅ ΠΏΠΎΠ΄ΡΠΊΠ°Π·ΠΊΠΈ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.
- ΠΡΠ°ΡΠΈΠΊΠΈ Π² Chart.js ΡΠ²Π»ΡΡΡΡΡ Π°Π΄Π°ΠΏΡΠΈΠ²Π½ΡΠΌΠΈ, ΡΡΠΎ Π·Π½Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ ΡΠΏΡΠΎΡΠ°Π΅Ρ ΡΠ°Π±ΠΎΡΡ.
Π£ΡΡΠ°Π½ΠΎΠ²ΠΊΠ°
Π£ΡΡΠ°Π½ΠΎΠ²ΠΈΡΠ΅ npm ΠΏΠ°ΠΊΠ΅Ρ react-chartjs-2
, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΊΠΎΠΌΠ°Π½Π΄Ρ Π½ΠΈΠΆΠ΅:
npm install react-chartjs-2 chart.js --save
ΠΡΠΈΠΌΠ΅ΡΡ
ΠΠ°Π²Π°ΠΉΡΠ΅ ΡΠΎΠ·Π΄Π°Π΄ΠΈΠΌ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ, Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ ΠΈ ΠΊΡΡΠ³ΠΎΠ²ΡΡ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.
1. ΠΠΈΠ½Π΅ΠΉΠ½Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°
ΠΠΈΠ½Π΅ΠΉΠ½ΡΠΉ Π³ΡΠ°ΡΠΈΠΊ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΠ΅Ρ ΡΠ°Π·ΠΌΠ΅ΡΠ°ΡΡ Π΄Π°Π½Π½ΡΠ΅ Π² Π²ΠΈΠ΄Π΅ ΡΠΎΡΠ΅ΠΊ Π½Π° Π»ΠΈΠ½ΠΈΠΈ. ΠΠ½ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΡΡΡ Π΄Π»Ρ ΡΠΎΠ³ΠΎ, ΡΡΠΎΠ±Ρ ΠΎΡΡΠ°Π·ΠΈΡΡ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ ΠΏΠΎΠΊΠ°Π·Π°ΡΠ΅Π»Π΅ΠΉ Ρ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ΠΌ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ, ΠΈΠ»ΠΈ ΠΆΠ΅ Π΄Π»Ρ ΡΡΠ°Π²Π½Π΅Π½ΠΈΡ Π΄Π²ΡΡ Π½Π°Π±ΠΎΡΠΎΠ² Π΄Π°Π½Π½ΡΡ . Π Π°Π·Π±Π΅ΡΠ΅ΠΌ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ΅.
ΠΡΠΎ Π½Π°Ρ ΡΠ°ΠΉΠ» App.js
. ΠΠ½ ΡΠ²Π»ΡΠ΅ΡΡΡ ΡΠΎΠ΄ΠΈΡΠ΅Π»ΡΡΠΊΠΈΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠΎΠΌ Π½Π°ΡΠ΅Π³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° Chart, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΠΎΠ³ΠΎ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π³ΡΠ°ΡΠΈΠΊΠΎΠ².
import React, { Component } from "react";
import { Chart } from "./components";
class App extends Component {
render() {
return <Chart />;
}
}
export default App;
ΠΡΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Chart.jsx
, ΠΎΠ½ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ
Π² Π²ΠΈΠ΄Π΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ
import React from "react";
import { Line } from "react-chartjs-2";
const Chart = () => {
const lineChartData = {
labels: ["October", "November", "December"],
datasets: [
{
data: [8137119, 9431691, 10266674],
label: "Infected",
borderColor: "#3333ff",
fill: true,
lineTension: 0.5
},
{
data: [1216410, 1371390, 1477380],
label: "Deaths",
borderColor: "#ff3333",
backgroundColor: "rgba(255, 0, 0, 0.5)",
fill: true,
lineTension: 0.5
}
]
};
return (
<Line
type="line"
width={160}
height={60}
options={{
title: {
display: true,
text: "COVID-19 Cases of Last 6 Months",
fontSize: 20
},
legend: {
display: true, //Is the legend shown?
position: "top" //Position of the legend.
}
}}
data={lineChartData}
/>
);
};
export default Chart;
ΠΠΎΡΡΠ½Π΅Π½ΠΈΠ΅
ΠΠ΅ΡΠ΅ΠΌΠ΅Π½Π½Π°Ρ lineChartData
Π²ΠΊΠ»ΡΡΠ°Π΅Ρ Π² ΡΠ΅Π±Ρ Π²ΡΠ΅ Π΄Π°Π½Π½ΡΠ΅ ΠΈ ΡΡΠΈΠ»ΠΈ Π³ΡΠ°ΡΠΈΠΊΠ°. ΠΡΠΎ ΠΎΠ±ΡΠ΅ΠΊΡ Ρ ΠΌΠ½ΠΎΠΆΠ΅ΡΡΠ²ΠΎΠΌ ΡΠ²ΠΎΠΉΡΡΠ², Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΡΡ
Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ Π΄Π°Π½Π½ΡΡ
Π² Π²ΠΈΠ΄Π΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ labels
ΠΏΠ΅ΡΠ΅ΠΌΠ΅Π½Π½ΠΎΠΉ lineChartData
β ΡΡΠΎ ΠΌΠ°ΡΡΠΈΠ², ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ, ΡΡΠΎΠ±Ρ ΠΏΡΠΈΡΠ²ΠΎΠΈΡΡ ΠΈΠΌΡ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡ ΠΎΡΡΠ΅Π·ΠΊΡ. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ datasets
ΡΠ°ΠΊΠΆΠ΅ ΡΠ²Π»ΡΠ΅ΡΡΡ ΠΌΠ°ΡΡΠΈΠ²ΠΎΠΌ, ΠΎΠ½ ΠΎΡΠ²Π΅ΡΠ°Π΅Ρ Π·Π° ΡΠ²Π΅Ρ, Π³ΡΠ°Π½ΠΈΡΡ, ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ ΠΎΡΡΠ΅Π·ΠΊΠ°. Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ lineTension
Π² ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ°Ρ
ΠΌΠ°ΡΡΠΈΠ²Π° datasets
ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΠ΅Ρ ΠΊΡΠΈΠ²ΠΈΠ·Π½Ρ ΠΎΡΡΠ΅Π·ΠΊΠΎΠ².
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ legend
ΡΠ»Π΅ΠΌΠ΅Π½ΡΠ° Line
ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅Ρ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠ΅ Π² Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΌΠ°ΡΡΠΈΠ²Π° datasets
.
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ

2. ΠΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΠ°
ΠΠΎΡ Π½Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Chart.jsx
, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΠΉ Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° Π΄Π°Π½Π½ΡΡ
Π² Π²ΠΈΠ΄Π΅ Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌΡ.
import React from "react";
import { Bar } from "react-chartjs-2";
const Chart = () => {
const barChartData = {
labels: ["October", "November", "December"],
datasets: [
{
data: [8137119, 9431691, 10266674],
label: "Infected People",
borderColor: "#3333ff",
backgroundColor: "rgba(0, 0, 255, 0.5)",
fill: true
},
{
data: [1216410, 1371390, 1477380],
label: "Deaths People",
borderColor: "#ff3333",
backgroundColor: "rgba(255, 0, 0, 0.5)",
fill: true
}
]
};
const barChart = (
<Bar
type="bar"
width={130}
height={50}
options={{
title: {
display: true,
text: "COVID-19 Cases of Last 3 Months",
fontSize: 15
},
legend: {
display: true, //Is the legend shown?
position: "top" //Position of the legend.
}
}}
data={barChartData}
/>
);
return barChart;
};
export default Chart;
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ

3. ΠΡΡΠ³ΠΎΠ²Π°Ρ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°
ΠΠ΄ΠΈΠ½ ΠΈΠ· Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΡΠ°ΡΡΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠ΅ΠΌΡΡ Π²Π°ΡΠΈΠ°Π½ΡΠΎΠ². ΠΠ°Π½Π½ΡΠ΅ Π² Π½Π΅ΠΌ ΠΏΡΠΎΠΏΠΎΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ ΡΠ°Π·Π΄Π΅Π»Π΅Π½Ρ Π½Π° ΡΠ΅Π³ΠΌΠ΅Π½ΡΡ. Π’Π°ΠΊΠΎΠΉ Π³ΡΠ°ΡΠΈΠΊ ΠΈΠ΄Π΅Π°Π»ΡΠ½ΠΎ ΠΎΡΡΠ°ΠΆΠ°Π΅Ρ ΡΠΎΠΎΡΠ½ΠΎΡΠ΅Π½ΠΈΠ΅ Π΄Π°Π½Π½ΡΡ .
Π Π°ΡΡΠΌΠΎΡΡΠΈΠΌ ΠΏΡΠΈΠΌΠ΅Ρ Π½ΠΈΠΆΠ΅, ΡΡΠΎΠ±Ρ ΡΠ°Π·ΠΎΠ±ΡΠ°ΡΡΡΡ.
ΠΠΎΡ Π½Π°Ρ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ Chart.jsx
, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡΡΠΈΠΉ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ Π΄Π°Π½Π½ΡΠ΅ Π² Π²ΠΈΠ΄Π΅ ΠΊΡΡΠ³ΠΎΠ²ΠΎΠΉ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ.
import React from "react";
import { Pie } from "react-chartjs-2";
const Chart = () => {
const pieChartData = {
labels: ["October", "November", "December"],
datasets: [{
data: [8137119, 9431691, 10266674],
label: "Infected People",
backgroundColor: ["#2FDE00", "#00A6B4", "#ff6600"],
hoverBackgroundColor: ["#175000", "#003350", "#993d00"]
}]
};
const pieChart = (
<Pie
type="pie"
width={130}
height={50}
options={{
title: {
display: true,
text: "COVID-19 Cases of Last 3 Months",
fontSize: 15
},
legend: {
display: true, //Is the legend shown?
position: "top" //Position of the legend.
}
}}
data={pieChartData}
/>
);
return pieChart;
};
export default Chart;
Π Π΅Π·ΡΠ»ΡΡΠ°Ρ

Π ΡΡΠΎΠΉ ΡΡΠ°ΡΡΠ΅ ΠΌΡ Π½Π° ΠΏΡΠΈΠΌΠ΅ΡΠ°Ρ
ΡΠ°Π·ΠΎΠ±ΡΠ°Π»ΠΈ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°ΡΡ ΡΠ°Π·Π»ΠΈΡΠ½ΡΠ΅ Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΡ Π²ΡΠΎΠ΄Π΅ Π»ΠΈΠ½Π΅ΠΉΠ½ΡΡ
Π³ΡΠ°ΡΠΈΠΊΠΎΠ², Π³ΠΈΡΡΠΎΠ³ΡΠ°ΠΌΠΌ ΠΈ ΠΊΡΡΠ³ΠΎΠ²ΡΡ
Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΡ chart.js
.
ΠΠ½ΡΠΎΡΠΌΠ°ΡΠΈΡ ΠΎ Π΄ΡΡΠ³ΠΈΡ
Π΄ΠΈΠ°Π³ΡΠ°ΠΌΠΌΠ°Ρ
ΠΈ ΠΈΡ
ΡΠ²ΠΎΠΉΡΡΠ²Π°Ρ
Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π½Π°ΠΉΡΠΈ Π½Π° ΡΡΡΠ°Π½ΠΈΡΠ΅ chart.js
Π½Π° github.
ΠΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ