πŸ“Š Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ Π½Π° React с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ chart.js

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π²Ρ‹ Π½Π°ΡƒΡ‡ΠΈΡ‚Π΅ΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ chart.js Π² React Π½Π° простых ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… с использованиСм статистичСских Π΄Π°Π½Π½Ρ‹Ρ….

πŸ“Š Π‘ΠΎΠ·Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ Π½Π° React с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ chart.js

Π§Ρ‚ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ 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.

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

Line Chart output
Π‘ΠΎΠ»ΡŒΡˆΠ΅ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π½Π° Π½Π°ΡˆΠΈΡ… Ρ‚Π΅Π»Π΅Π³Ρ€Π°ΠΌ-ΠΊΠ°Π½Π°Π»Π°Ρ… Β«Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° программиста» ΠΈ Β«Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π΅Ρ€Π°Β».

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;

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

Bar Chart output

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;

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚

Pie Chart output

Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ… Ρ€Π°Π·ΠΎΠ±Ρ€Π°Π»ΠΈ, ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΡ‹ Π²Ρ€ΠΎΠ΄Π΅ Π»ΠΈΠ½Π΅ΠΉΠ½Ρ‹Ρ… Π³Ρ€Π°Ρ„ΠΈΠΊΠΎΠ², гистограмм ΠΈ ΠΊΡ€ΡƒΠ³ΠΎΠ²Ρ‹Ρ… Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ chart.js.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ Π΄Ρ€ΡƒΠ³ΠΈΡ… Π΄ΠΈΠ°Π³Ρ€Π°ΠΌΠΌΠ°Ρ… ΠΈ ΠΈΡ… свойствах Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ Π½Π° страницС chart.js Π½Π° github.

ΠœΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Ρ‹ ΠΏΠΎ Ρ‚Π΅ΠΌΠ΅

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊΠΈ

Π›Π£Π§Π¨Π˜Π• БВАВЬИ ПО Π’Π•ΠœΠ•