В этой статье вы узнаете о библиотеки Chart.js для построения графиков, вы увидите что с неё работать очень просто, также вы узнаете как её установить.
Также, если вам интересно то посмотрите статью, «График на JavaScript и canvas», в ней вы научаетесь делать графики без библиотек.
Подключение Chart.js:
Библиотеку Chart.js можно подключить разными способами, хоть просто скачать файлы, хоть скачать через npm, сейчас вы всё увидите.
Как Chart.js скачать:
Для начала посмотрим как подключить скачав файлы Chart.js, для этого заходим на GitHub, и в низу выбираем файл Chart.js.zip, нажимаем на него.
В этом zip архиве должны быть все нужные файлы для работы с этой библиотекой, от туда берём файл «Chart.min.css» и «Chart.min.js», вставляем их в ваш проект, ну и подключаем их как обычные CSS и JS файлы.
1 2 | <link rel="stylesheet" href="Chart.min.css"> <script src="Chart.min.js"></script> |
Как видите всё очень просто.
CDN:
Также если вы не хотите скачивать какие либо файлы, то вам подойдёт способ подключения через CDN, вот как это делается.
1 | <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script> |
Опять же, всё просто.
NPM:
Если же вы используете node.js или какой-нибудь JavaScript фреймворк, то вы можете скачать Chart.js через npm.
1 | npm install chart.js --save |
Дальше просто через import, подключаем библиотеку.
Работа с Chart.js:
Теперь перейдём к самому важному, это к самой работе, для этого, сначала вам надо создать canvas элемент.
1 | <canvas id="myChart"></canvas> |
Дальше уже пишем JavaScript код.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | let ctx = document.getElementById('myChart').getContext('2d'); let chart = new Chart(ctx, { // Тип графика type: 'line', // Создание графиков data: { // Точки графиков labels: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль'], // График datasets: [{ label: 'Мой первый график на Chart.js', // Название backgroundColor: 'rgb(255, 99, 132)', // Цвет закраски borderColor: 'rgb(255, 99, 132)', // Цвет линии data: [0, 10, 5, 2, 20, 30, 45] // Данные каждой точки графика }] }, // Настройки графиков options: {} }); |
Давайте разберём, что к чему тут всё, в первой строчки всё понятно, если нет, то прочитайте статью по этой ссылке.
Дальше вы создаёте объект класса Chart, первым параметром вы передаёте canvas элемент для рисование на нём, вторым JSON объект, для настройки графика.
Первая же настройка это type, которая отвечает за тип графика, всего их есть несколько типов.
- line — Линейный график;
- bar — Гистограмма или график в виде столбцов;
- radar — радарная диаграмма;
- doughnut — Кольцевая диаграмма;
- pie — Круговая диаграмма;
- polarArea — Полярная диаграмма;
- bubble — Пузырчатая диаграмма;
Это вот все, если вы не знаете что какая диаграмма делает и какой вид имеет, то просто загуглите, так как, здесь не будет это объяснятся, потому что, статья не про это, да и очень большая она тогда получится.
Следующий параметр, это data, в ней хранится все параметры для графика, и первый параметр внутри, это labels, хранит в себе точки для настройки, в моём случае это месяцы.
Также ниже уже идёт параметр datasets, он создаёт один график или несколько, что бы, но об этом ниже, внутри он хранит параметры графиков, например, цвет или название,
Как уже наверное заметили, самый важный параметр это data, так как он хранит всё самую важную информацию о графиках.
В конце идёт параметр options, он просто хранит настройки всего графика, например, в нём ввы можете изменить стандартный шрифт.
Вот результат, что у нас получилось.
Как видите такой простой линейный график у нас получился.
Несколько линейных графиков:
Напоследок покажу как сделать несколько таких линейных графиков, это очень просто, вот.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | let ctx = document.getElementById('myChart').getContext('2d'); let chart = new Chart(ctx, { type: 'line', data: { labels: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль'], datasets: [ { // График зелёного цвета label: 'График 1', backgroundColor: 'transparent', borderColor: 'green', data: [0, 10, 5, 2, 20, 30, 45], }, { // График синего цвета label: 'График 2', backgroundColor: 'transparent', borderColor: 'blue', data: [5, 3, 10, 30, 40, 20, 5] }, { // График красного цвета label: 'График 3', backgroundColor: 'transparent', borderColor: 'red', data: [20, 15, 10, 30, 25, 30, 35] }], }, }); |
Тут всё тоже самое, только в массив datasets, запихнули три JSON объект, которые хранят информацию о каждой диаграмме, таким образом мы имеем три диаграмме в одном графике, вот результат.
Как видите всё работает так как нам надо, также есть ещё куча настроек но о них смотрите в документации или выше, где перечисляли типы графиков.
Вывод:
В этой статье вы прочитали о библиотеки Chart.js для построения графиков, как её установит и основы работы с ней.
Подписываетесь на соц-сети:
Оценка:
Загрузка...