Как использовать chart.js для создания диаграмм в React

Существует несколько пакетов npm , которые позволяют создавать диаграммы в React; chart.js — один из пакетов, который упрощает создание диаграмм и графиков.

Оболочка React для chart.js — это react-chartjs-2 ; он упрощает работу в React, однако он не поддерживает все функции настройки, которые поставляются с Chart.js.

Оба эти пакета необходимо установить с помощью npm , прежде чем их можно будет использовать.

Типы диаграмм:

Гистограммы
Линейный график
Круговые диаграммы

Содержание

Примеры
1. Гистограмма
Пояснение
2. Линейный график
2. Круговые диаграммы
Дополнительные примеры

Примеры

Давайте рассмотрим некоторые типы диаграмм, которые можно создать с помощью эта удобная библиотека:

1. Гистограмма

 импортировать React из 'react'; импортировать ReactDOM из 'react-dom'; импортировать приложение  из './app.js';ReactDOM.render (, document.getElementById (' root '));

Пояснение

Переменная state содержит все данные и свойства стиля гистограммы. Ключевое слово labels присваивает имена каждой полосе, а поднабор dataset содержит такую информацию, как цвет полосы, ширина границы и высота полосы.
Компонент Bar отображается с помощью внутри приложения React составная часть. Определенное состояние назначается компоненту стержня в строке 22 . Свойство options позволяет использовать различные стили, например положение заголовка и легенды диаграммы.

2. Линейный график

Синтаксис аналогичен синтаксису линейчатой диаграммы. Здесь используется новое свойство lineTension ; он контролирует кривизну линии, соединяющей точки.

 импортировать React из 'react'; импортировать ReactDOM  from 'response-dom'; импортировать приложение из './app.js';ReactDOM.render (, document.getElementById (' root '));

2. Круговые диаграммы

Помимо обычной круговой диаграммы, chart.js также имеет пончик graph, который по-разному стилизует круговую диаграмму. Обе эти диаграммы представлены ниже:

 импортировать React из 'react'; импортировать ReactDOM из 'react  -dom '; импортировать приложение из' ./app.js';ReactDOM.render (, документ. getElementById ('корень'));