Как построить линейный график с несколькими линиями с помощью Chart.js?

Чтобы построить линейный график с несколькими линиями с помощью Chart.js, вам нужно добавить несколько наборов данных (datasets) в объект data. Каждый набор данных будет представлять собой отдельную линию на графике.

Вот пример, как это можно сделать:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Линейный график с несколькими линиями</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="400" height="200"></canvas>
    <script>
        // Подготовка данных
        const data = {
            labels: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль'],
            datasets: [
                {
                    label: 'Продажи',
                    data: [65, 59, 80, 81, 56, 55, 40],
                    fill: false,
                    borderColor: 'rgb(75, 192, 192)',
                    tension: 0.1
                },
                {
                    label: 'Посещения',
                    data: [28, 48, 40, 19, 86, 27, 90],
                    fill: false,
                    borderColor: 'rgb(255, 99, 132)',
                    tension: 0.1
                },
                {
                    label: 'Регистрации',
                    data: [12, 35, 22, 45, 30, 50, 60],
                    fill: false,
                    borderColor: 'rgb(54, 162, 235)',
                    tension: 0.1
                }
            ]
        };

        // Настройки графика
        const config = {
            type: 'line',
            data: data,
            options: {
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        };

        // Создание графика
        const myChart = new Chart(
            document.getElementById('myChart'),
            config
        );
    </script>
</body>
</html>

Объяснение:

  1. Подключение Chart.js:
  2. Библиотека Chart.js подключается через CDN с помощью тега script.

  3. HTML структура:

  4. Создается элемент canvas с идентификатором myChart, который будет использоваться для отображения графика.

  5. Подготовка данных:

  6. Объект data содержит метки (labels) для оси X и несколько наборов данных (datasets) для оси Y.
  7. В данном примере используются три набора данных: Продажи, Посещения и Регистрации, каждый из которых имеет свои данные, цвет границы и натяжение линии.

  8. Настройки графика:

  9. Объект config содержит тип графика (line), данные и дополнительные настройки.
  10. В настройках указано, что ось Y должна начинаться с нуля (beginAtZero: true).

  11. Создание графика:

  12. Создается новый объект Chart, который принимает элемент canvas и конфигурацию графика.

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

Источник