Головна » Розробка » Як працювати з Chart.js: Посібник для початківців

Як працювати з Chart.js: Посібник для початківців

Chart.js — це популярна бібліотека для створення інтерактивних графіків і діаграм на веб-сторінках. Вона проста у використанні, підтримує різні типи графіків та дозволяє налаштовувати їх під ваші потреби.

Встановлення Chart.js

Для початку потрібно встановити бібліотеку Chart.js. Це можна зробити кількома способами:

  1. Підключення через CDN Найшвидший спосіб почати роботу з Chart.js — це використати Content Delivery Network (CDN). Додайте наступний рядок у секцію <head> вашого HTML-документу: 
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  2. Встановлення через npm Якщо ви працюєте з Node.js, встановіть Chart.js за допомогою npm: 
    npm install chart.js
  3. Завантаження файлів Ви також можете завантажити бібліотеку з офіційного сайту Chart.js і підключити її локально.

Створення графіка

Щоб створити графік, вам потрібен HTML-елемент <canvas> і JavaScript-код для ініціалізації Chart.js. Ось базовий приклад:

HTML

<canvas id="myChart" width="400" height="200"></canvas>

JavaScript

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar', // Тип графіка
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], // Підписи для осі X
        datasets: [{
            label: 'Кількість голосів',
            data: [12, 19, 3, 5, 2, 3], // Дані для графіка
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});

Результат буде виглядати як стовпчиковий графік з різнокольоровими стовпчиками.

Налаштування графіка

Chart.js дозволяє гнучко налаштовувати графіки. Ось декілька ключових параметрів:

  1. Типи графіків Chart.js підтримує такі типи графіків:
    • Стовпчиковий (bar)
    • Лінійний (line)
    • Кругова діаграма (pie)
    • Радіальна діаграма (radar)
    • Схема розсіювання (scatter)

    Щоб змінити тип графіка, просто змініть значення type.

  2. Теми та стилі Ви можете змінювати кольори, шрифти та розміри елементів графіка через об’єкт options. Наприклад: 
    options: {
    plugins: {
        legend: {
            display: true,
            position: 'top'
        }
    }
}
  3. Анімація Chart.js підтримує анімацію для графіків. Ви можете налаштувати тривалість і ефекти через параметри animation.

Додавання інтерактивності

Chart.js дозволяє робити графіки інтерактивними. Наприклад, ви можете додати події, які реагують на натискання на графік:

const myChart = new Chart(ctx, {
    type: 'bar',
    data: {...},
    options: {
        onClick: (event, elements) => {
            if (elements.length > 0) {
                const index = elements[0].index;
                alert(`Ви натиснули на ${myChart.data.labels[index]}`);
            }
        }
    }
});

Висновок

Chart.js — це потужний інструмент для створення красивих та функціональних графіків. Завдяки простому інтерфейсу та широким можливостям налаштування, ця бібліотека підійде як новачкам, так і досвідченим розробникам.

Щоб дізнатися більше, відвідайте документацію Chart.js.