Всем привет 👋!
Недавно я отвечал за создание приборной панели, похожей на верхнюю. Не буду врать, моя художественная сторона была в восторге, потому что я думаю, что это выглядит довольно аккуратно. С другой стороны, моя сторона разработчика была в восторге от воссоздания этого в коде, так как я уже давно хотел попробовать Chart.js. Сегодня я хочу сэкономить немного вашего времени. Chart.js не так сложен, но когда дело доходит до его использования с Next.js, есть некоторые ноу-хау, которые сэкономят вам много времени и избавят вас от «Это должно работать, но по какой-то причине это не работает». т”.
Оглавление:
- Как правильно инициализировать и зарегистрировать экземпляр ChartJS,
- Как создать линейную диаграмму,
- Как создать гистограмму.
- Как создать кольцевую диаграмму
Не стесняйтесь просто перейти к интересующему вас разделу и скопировать код, или, лучше сказать, «вдохновить» 😉.
Как правильно инициализировать и зарегистрировать экземпляр ChartJS
При работе с Chart.js и Next.js мы де-факто работаем с двумя библиотеками. Один из них — «chart.js», а второй — «react-chartjs-2». Идите вперед и установите их с помощью менеджера пакетов по вашему выбору. Поскольку мой выбор - пряжа, я бы сделал это так:
yarn add chart.js react-chartjs-2
Следующее, на чем мы должны сосредоточиться, это правильная регистрация. Chart.js поддерживает древовидную структуру, и это означает, что необходимо импортировать и регистрировать контроллеры, элементы, шкалы и плагины, которые вы собираетесь использовать. В коде это переводится так:
Первая зацепка
Первое, что вы должны проверить, если некоторые параметры стиля не работают, — это зарегистрировали ли вы нужный контроллер. Например, предположим, что вы хотите заполнить область под линией графика. Вы делаете все точно так же, как на странице документации и точно так же, как в туториалах, и все равно не работает. Не выбрасывайте компьютер из окна. Просто просмотрите доступные контроллеры и проверьте, нет ли чего-то, чего вам не хватает. Причина, по которой заливка не работала, заключалась в том, что я не зарегистрировал контроллер Filler. Имена для контроллеров описательные, поэтому руководствуйтесь здравым смыслом или, что еще лучше, Stack Overflow.
Возвращаясь к правильному импорту. После регистрации необходимых контроллеров из chart.js вы можете импортировать типы диаграмм, которые хотите использовать, из react-chartjs-2.
Это все, что касается инициализации.
Как создать линейную диаграмму
Прежде чем мы перейдем к коду, я просто хотел, чтобы вы знали, что я думаю о создании диаграмм по своему желанию. В конце концов, chart.js — это большой модуль, и вместо того, чтобы изучать все варианты, лучше просто сосредоточиться на своей конечной цели.
Выше вы можете увидеть диаграмму по умолчанию. Если мы хотим создать желаемую диаграмму, мы должны:
- Избавьтесь от меток x и y, а также сетки
- Избавьтесь от заголовка и имени набора данных
- Избавьтесь от баллов
- Заполните область под линией
Теперь давайте просто переведем это на javascript.
- Создать элемент линии
Поскольку мы используем элемент линейной диаграммы, мы используем именно его.
2. Предоставить набор данных
Как видите, данные, которые мы здесь используем, довольно просты. Ничего впечатляющего. Позже вы, вероятно, захотите заполнить его фактическими данными.
3. Определите визуальные параметры
Ссылаясь на нашу визуальную дорожную карту ранее, мы имеем:
- Отображение xAxis и yAxis, установленное на false, скрывает метки x и y, а также сетку для этого,
- для отображения легенд установлено значение false, скрывает легенды и панели легенд,
- радиус точки и радиус попадания установлены на 0 отключить режим взаимодействия и обвести точки,
- Свойство line позволяет нам заполнить область под Line. НЕ ЗАБУДЬТЕ ЗАРЕГИСТРИРОВАТЬ ЭЛЕМЕНТ-ЗАПОЛНИТЕЛЬ В CHART JS
Как создать гистограмму
Здесь та же история. Давайте перечислим все, что нам нужно изменить, чтобы перейти от левой диаграммы к правой:
- Избавьтесь от оси x,
- Расположите их рядом друг с другом, а не штабелируйте,
- Измените метки легенды на точки вместо прямоугольников и поместите их с левой стороны,
- Создайте зазор между стержнями и сделайте их круглыми.
- Создать элемент Bar
2. Создание набора данных
Как вы можете видеть в этом наборе данных, в дополнение к данным, мы также включили некоторые параметры настройки, такие как радиус границы, который отвечает за округление полосы сверху, backgroundColor или толщину полосы. Мы делаем это здесь, а не в объекте параметров, потому что параметры являются общими для обоих наборов данных, и мы хотим, чтобы некоторые значения были уникальными для данного бара.
3. Панели стилей, чтобы соответствовать тому, который мы хотим создать
- Отображение xAxis, установленное на false, скрывает xAxis, yAxis max, установленное на 1, расширяет наши значения Y. В противном случае столбцы были бы такими же высокими, как и сам график. Это выглядит лучше, когда у вас есть немного белого пространства сверху,
- Чтобы расположить их рядом друг с другом, вы должны добавить оба объекта в массив наборов данных,
- Если вы хотите использовать точки вместо прямоугольников в качестве строки меток легенды, вам нужно добавить объект меток с параметром usePointStyle, установленным в true, и параметром pointStyle, установленным в «круг»,
- И последнее, но не менее важное: разрыв между двумя барами можно создать, установив для barPercentage значение 0,3, а для categoryPercentage значение 1. Они коррелируют друг с другом. Если вам нужно более широкое объяснение, вы можете найти его здесь.
Как создать кольцевую диаграмму
На самом деле кольцевую диаграмму создать проще всего из всех диаграмм, которые мы уже рассмотрели, поэтому позвольте мне просто вставить весь код сразу:
Ты видишь? Здесь нет ничего сумасшедшего. Самым большим откровением может быть то, что мы определяем 4 цвета фона, поскольку у нас есть 4 части кольцевой диаграммы. BorderWidth и вес — это значения, отвечающие за общую толщину, и вам просто нужно попробовать несколько значений и выбрать то, которое подходит вам больше всего, а значение выреза — это просто вырез из середины «бублика». Это изменяет размер отверстия внутри пончика.
Краткое содержание
Создание красивых диаграмм с библиотекой chart.js через некоторое время становится довольно интуитивно понятным. Самое главное, что нужно помнить, это то, что при использовании его с React/Next.js вы должны помнить о регистрации всех необходимых контроллеров. Если вы сделаете это, остальное должно быть гладким.
Удачного программирования, друзья 🥳!
Если возникнут вопросы, обращайтесь ко мне:
Twitter
Discord:Szymon From Poland#6093
