Как построить линейный график с несколькими линиями с помощью 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>
Объяснение:
- Подключение Chart.js:
-
Библиотека Chart.js подключается через CDN с помощью тега script.
-
HTML структура:
-
Создается элемент canvas с идентификатором myChart, который будет использоваться для отображения графика.
-
Подготовка данных:
- Объект data содержит метки (labels) для оси X и несколько наборов данных (datasets) для оси Y.
-
В данном примере используются три набора данных: Продажи, Посещения и Регистрации, каждый из которых имеет свои данные, цвет границы и натяжение линии.
-
Настройки графика:
- Объект config содержит тип графика (line), данные и дополнительные настройки.
-
В настройках указано, что ось Y должна начинаться с нуля (beginAtZero: true).
-
Создание графика:
- Создается новый объект Chart, который принимает элемент canvas и конфигурацию графика.
Этот пример создает линейный график с тремя линиями, отображающими данные о продажах, посещениях и регистрациях за несколько месяцев. Вы можете настроить график по своему усмотрению, добавляя дополнительные наборы данных, изменяя стили и настройки.
