Как создать быстрый компонент React с ChartJS 2 и классными настройками (часть 1 из 2)
Пару недель назад я работал над проектом React в Thinkific, где нам нужно было реализовать библиотеку диаграмм, которая должна быть достаточно гибкой, чтобы иметь дело с настраиваемыми всплывающими подсказками и стильными полосами. Мы решили использовать ChartJS, и это побудило меня создать это быстрое руководство о том, как мы это сделали. 😄
Приступим к кодированию 🚀
ChartJS 2 для React
Мы выбрали ChartJS 2 в качестве библиотеки для диаграмм, так как это открытый исходный код (ура!), вокруг него потрясающее сообщество, а также он обладает широкими возможностями настройки.
Чтобы использовать его внутри компонента React, мы решили установить пакет react-chartjs-2, который является просто оболочкой React для библиотеки.
Вы можете установить его, запустив:
npm install react-chartjs-2 chart.js --save
Теперь мы готовы приступить к работе над нашим компонентом! ⭐️
С помощью пары строк кода у нас уже есть диаграмма с полосами 🎉. Мы можем немного увеличить его и сделать закругленные края верхней панели с помощью специального кода.
Прутки с закругленными краями
Это было немного сложно, поскольку ChartJS 2 не предлагает возможности установить радиус границы для каждой полосы, поэтому нам пришлось создать собственный код.
Код является переопределением функции рисования из класса Rectangle в ChartJS. Базовый код взят отсюда, и я адаптировал его, так как нам нужно было скруглить только верхние края, но нижний остался бы таким же.
Чтобы использовать этот пользовательский код в предыдущем компоненте, нам нужно импортировать его и передать cornerRadius как свойство option в BarChart.
Теперь вы должны увидеть верхние закругленные края на вашей диаграмме! 🎉
Чтобы добавить дополнительные настройки, вы можете взглянуть на доступные параметры для гистограммы в ChartJS 2 docs.
В следующей статье я покажу вам, как интегрировать классные пользовательские всплывающие подсказки с ChartJS 2, чтобы сделать вещи немного интереснее. Вы можете найти пример графика здесь: Github repo
Если вам понравилась эта статья, не забудьте значок 👏!
