Статьи по JavaScript

Chart.js – руководство по созданию диаграмм и графиков на сайте с примерами.

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

Добавление chart.js на сайт

Сначала нам нужно импортировать сценарий chart.js в наш проект. Есть несколько способов это сделать. Я покажу вам самый простой.

Разместите в коде сайта:

<script src="https://cdn.jsdelivr.net/npm/chart.js@latest/dist/Chart.min.js"></script>
Code language: HTML, XML (xml)

Вы можете также посмотреть официальную документацию.

Описание основных понятий

Прежде чем перейти к коду, покажу вам основы того, что представляет собой каждый из параметров, своими словами.

  • Labels: это метки наших данных. Для каждого значения должна быть своя метка. То есть, если наш массив меток состоит из 4 элементов, то наш массив данных так же должен состоять из 4 элементов.
  • Dataset: это набор данных. Внутри этого набора мы добавляем данные или data, которые представляют собой массив чисел.
  • Datasets: эта библиотека принимает несколько наборов данных в диаграмме.

Для упрощения, если мы хотим показать продажи за год по месяцам, взяв только первые четыре месяца (январь, февраль, март и апрель), наши метки будут выглядеть следующим образом:

const tags = ["Январь", "Февраль", "Март", "Апрель"];
Code language: JavaScript (javascript)

В результате мы получим следующий набор данных, в котором, помимо их, мы указываем цвет и другие параметры:

const dataSales2020 = { label: "Продажи за месяц", data: [5000, 1500, 8000, 5102], // Данные представляют собой массив, который должен иметь такое же количество значений, как и количество тегов. backgroundColor: 'rgba(54, 162, 235, 0.2)', // Цвет фона borderColor: 'rgba(54, 162, 235, 1)', // Цвет границ borderWidth: 1,// Толщина границ };
Code language: JavaScript (javascript)

Обратите внимание, что каждый набор данных имеет метку, позволяющую различать данные. Если мы позже добавим еще один набор , например “Продажи по месяцам 2021 года”, то это позволит их различать.

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

Все графики находятся внутри canvas. Поэтому давайте определим элемент canvas в нашем HTML и затем передадим этот элемент DOM (полученный с помощью querySelector) в метод Chart.

Переведено с помощью www.DeepL.com/Translator (бесплатная версия)

Первый график с помощью chart.js – руководство.

Давайте начнем с рассмотрения линейного графика. У нас есть HTML дизайн. Этот дизайн может быть полноценной страницей или самой простой. Главное, чтобы был элемент canvas.

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Графики с использованием chart.js</title> <script src="https://cdn.jsdelivr.net/npm/chart.js@latest/dist/Chart.min.js"></script> </head> <body> <h1>Пример 1 - Линейный график</h1> <canvas id="grafica"></canvas> <script src="script.js"></script> </body> </html>
Code language: HTML, XML (xml)

Я импортирую библиотеку в строке 8, определяю canvas в строке 13 и импортирую скрипт, который создаст график, в строке 14. Теперь давайте посмотрим на сам скрипт:

// Получение ссылки на элемент canvas в DOM const $grafica = document.querySelector("#grafica"); // Tags - это метки, которые идут по оси X. const tags = ["Январь", "Февраль", "Март", "Апрель"] // У нас может быть несколько наборов данных. Давайте начнем с одного const dataSales2020 = { label: "Продажи за месяц", data: [5000, 1500, 8000, 5102], // Данные представляют собой массив, который должен иметь такое же количество значений, как и количество тегов. backgroundColor: 'rgba(54, 162, 235, 0.2)', // Цвет фона borderColor: 'rgba(54, 162, 235, 1)', // Цвет границ borderWidth: 1,// Толщина границ }; new Chart($grafica, { type: 'line',// Тип графики data: { labels: tags, datasets: [ dataSales2020, // Больше данных здесь.... ] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }], }, } });
Code language: PHP (php)

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

Затем мы создаем новый экземпляр Chart, передавая ему два параметра: элемент DOM, в котором будет строиться график, и характеристики графика. В результате получилась картина, которую вы можете видеть на изображении выше.

Кстати, опции begintAtZero предназначены для того, чтобы левая ось Y начиналась с 0, а не с самого низкого значения в наборе данных. Мне нравится такой подход, но если вы хотите, вы можете изменить его или удалить эту настройку.

Столбчатая диаграмма (гистограмма)

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

// Получение ссылки на элемент canvas в DOM const $grafica = document.querySelector("#grafica"); // Tags - это метки, которые идут по оси X. const tags = ["Январь", "Февраль", "Март", "Апрель"] // У нас может быть несколько наборов данных. Давайте начнем с одного const dataSales2020 = { label: "Продажи за месяц", data: [5000, 1500, 8000, 5102], // Данные представляют собой массив, который должен иметь такое же количество значений, как и количество тегов. backgroundColor: 'rgba(54, 162, 235, 0.2)', // Цвет фона borderColor: 'rgba(54, 162, 235, 1)', // Цвет границ borderWidth: 1,// Толщина границ }; new Chart($grafica, { type: 'bar',// Тип графики - изменяем тип здесь. data: { labels: tags, datasets: [ dataSales2020, // Больше данных ... ] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }], }, } });
Code language: PHP (php)

Единственное, что меняется – это тип от строки к строке, в строке: type: ‘bar’.

Использование двух наборов данных

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

// Получение ссылки на элемент canvas в DOM const $grafica = document.querySelector("#grafica"); // Tags - это метки, которые идут по оси X. const tags = ["Январь", "Февраль", "Март", "Апрель"] // У нас может быть несколько наборов данных. const dataSales2020 = { label: "Продажи за месяц - 2020", data: [5000, 1500, 8000, 5102], // Данные представляют собой массив, который должен иметь такое же количество значений, как и количество тегов. backgroundColor: 'rgba(54, 162, 235, 0.2)', // Цвет фона borderColor: 'rgba(54, 162, 235, 1)', // Цвет границы borderWidth: 1,// Толщина границ }; const dataSales2021 = { label: "Продажи за месяц - 2021", data: [10000, 1700, 5000, 5989], // Данные представляют собой массив, который должен иметь такое же количество значений, как и количество тегов. backgroundColor: 'rgba(255, 159, 64, 0.2)',// Цвет фона borderColor: 'rgba(255, 159, 64, 1)',// Цвет границы borderWidth: 1,// Толщина границ }; new Chart($grafica, { type: 'line',// Тип графики data: { labels: tags, datasets: [ dataSales2020, dataSales2021, // Больше данных ... ] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }], }, } });
Code language: PHP (php)

Обратите внимание, что здесь два набора данных, и каждый из них отличается значениями, меткой и цветом. Но количество данных всегда соответствует меткам на графике. Можно добавлять неограниченное количество наборов данных.

Двойной набор данных, но в виде гистограммы

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

Приведенный выше пример можно использовать для данной демонстрации, просто изменив тип графика, и два набора данных будут отображаться каждый по-своему.

Использование большего количества наборов данных в chart.js

Если двух наборов данных оказалось недостаточно, вот еще один пример, в котором мы сравниваем гораздо большее их количество.

// Получение ссылки на элемент canvas в DOM const $grafica = document.querySelector("#grafica"); // Tags - это метки, которые идут по оси X. const tags = ["Январь", "Февраль", "Март", "Апрель"] // У нас может быть несколько наборов данных. const dataSales2018 = { label: "Продажи за месяц - 2020", data: [2000, 1200, 4000, 1102], // Данные представляют собой массив, который должен иметь такое же количество значений, как и количество тегов. backgroundColor: 'rgba(54, 162, 235, 0.2)', // Цвет фона borderColor: 'rgba(54, 162, 235, 1)', // Цвет границы borderWidth: 1,// Толщина границ }; const dataSales2019 = { label: "Продажи за месяц - 2021", data: [13000, 1100, 5300, 5789], // Данные представляют собой массив, который должен иметь такое же количество значений, как и количество тегов. backgroundColor: 'rgba(255, 159, 64, 0.2)',// Цвет фона borderColor: 'rgba(255, 159, 64, 1)',// Цвет границы borderWidth: 1,// Толщина границ }; const dataSales2020 = { label: "Продажи за месяц - 2021", data: [10000, 1700, 5000, 5989], // Данные представляют собой массив, который должен иметь такое же количество значений, как и количество тегов. backgroundColor: 'rgba(255, 159, 64, 0.2)',// Цвет фона borderColor: 'rgba(255, 159, 64, 1)',// Цвет границы borderWidth: 1,// Толщина границ }; const dataSales2021 = { label: "Продажи за месяц - 2021", data: [10000, 1700, 5000, 5989], // Данные представляют собой массив, который должен иметь такое же количество значений, как и количество тегов. backgroundColor: 'rgba(255, 159, 64, 0.2)',// Цвет фона borderColor: 'rgba(255, 159, 64, 1)',// Цвет границы borderWidth: 1,// Толщина границ }; new Chart($grafica, { type: 'line',// Тип графики data: { labels: tags, datasets: [ dataSales2018, dataSales2019, dataSales2020, dataSales2021, // Больше данных ... ] }, options: { scales: { yAxes: [{ ticks: { beginAtZero: true } }], }, } });
Code language: PHP (php)

В данном случае график имеет тип line, но без проблем может иметь тип bar. Таким образом, вы можете добавлять бесконечные наборы данных (учитывая то, что они должны нормально восприниматься).

Круговая диаграмма

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

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

Для этого графика есть два варианта: pie chart – круговая диаграмма и dougnhut – диаграмма в виде “бублика”.

// Получение ссылки на элемент canvas в DOM const $grafica = document.querySelector("#grafica"); // Tags - участки графика const tags = ["Яндекс.Директ", "Google Ads", "Таргетированная реклама", "Партнеры"] // У нас может быть несколько наборов данных. Давайте начнем с одного const dataTraffic = { data: [1500, 400, 2000, 7000], // Данные представляют собой массив, который должен иметь такое же количество значений, как и количество тегов. // Теперь цветов фона должно быть столько, сколько данных, т.е. для данного примера 4. backgroundColor: [ 'rgba(163,221,203,0.2)', 'rgba(232,233,161,0.2)', 'rgba(230,181,102,0.2)', 'rgba(229,112,126,0.2)', ],// Цвет фона borderColor: [ 'rgba(163,221,203,1)', 'rgba(232,233,161,1)', 'rgba(230,181,102,1)', 'rgba(229,112,126,1)', ],// Цвет границы borderWidth: 1,// Толщина границ }; new Chart($grafica, { type: 'pie',// Тип графики. Может быть dougnhut или pie data: { labels: tags, datasets: [ dataTraffic, // Больше данных ] }, });
Code language: PHP (php)

К слову, в данном случае мы используем уже не один цвет, а массив цветов, каждый из которых соответствует части графика.

Изменение размера canvas (холста) в chart.js

Холст, на котором строится график, может быть настроен по размеру. Он принимает все стили, которые есть у элемента, поэтому, например, мы можем изменить максимальную ширину графика с помощью CSS.

У нас есть элемент canvas в нашем HTML:

<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Графики с использованием chart.js</title> <script src="https://cdn.jsdelivr.net/npm/chart.js@latest/dist/Chart.min.js"></script> </head> <body> <h1>Пример 1 - Линейный график</h1> <canvas id="grafica"></canvas> <script src="script.js"></script> </body> </html>
Code language: HTML, XML (xml)

Добавим стиль в CSS (например, укажем max-width и max-height):

#grafica{ max-width:500px; max-height:250px; }
Code language: CSS (css)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *