Share This
Связаться со мной
Крути в низ
Categories
//📊 Создавайте диаграммы на React с помощью библиотеки chart.js

📊 Создавайте диаграммы на React с помощью библиотеки chart.js

В этой статье вы научитесь использовать chart.js в React на простых примерах с использованием статистических данных.

sozdavajte diagrammy na react s pomoshhju biblioteki chartjs fc7078b - 📊 Создавайте диаграммы на 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.

Результат

sozdavajte diagrammy na react s pomoshhju biblioteki chartjs cb20fd1 - 📊 Создавайте диаграммы на React с помощью библиотеки chart.js

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;     

Результат

sozdavajte diagrammy na react s pomoshhju biblioteki chartjs fd65e2f - 📊 Создавайте диаграммы на React с помощью библиотеки chart.js

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;     

Результат

sozdavajte diagrammy na react s pomoshhju biblioteki chartjs de19795 - 📊 Создавайте диаграммы на React с помощью библиотеки chart.js

Pie Chart output

В этой статье мы на примерах разобрали, как создавать различные диаграммы вроде линейных графиков, гистограмм и круговых диаграмм, используя библиотеку chart.js.

Информацию о других диаграммах и их свойствах вы можете найти на странице chart.js на github.

Материалы по теме

  • Django, Pandas и Chart.js для быстрой панели инструментов
  • Анимации на Javascript: знакомимся с JavaScript Web Animation API
  • Анимация графиков в Python за 4 шага

  • 0 views
  • 0 Comment

Leave a Reply

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

Свежие комментарии

    Рубрики

    About Author 01.

    blank
    Roman Spiridonov

    Моя специальность - Back-end Developer, Software Engineer Python. Мне 39 лет, я работаю в области информационных технологий более 5 лет. Опыт программирования на Python более 3 лет. На Django более 2 лет.

    Categories 05.

    © Speccy 2022 / All rights reserved

    Связаться со мной
    Close