Chart.js — это библиотека JavaScript, которая позволяет создавать интерактивные и красиво оформленные диаграммы простым способом. Одним из самых популярных типов диаграмм, которые можно создать с помощью Chart.js, является линейная диаграмма. Линейная диаграмма представляет собой график, на котором данные отображены в виде линии, соединяющей точки с указанными значениями.
Для создания линейной диаграммы с помощью Chart.js, необходимо включить библиотеку в проект и подготовить данные, которые будут отображаться на графике. Чтобы включить Chart.js, нужно добавить следующий код в раздел загрузки скриптов:
<script src=»https://cdn.jsdelivr.net/npm/chart.js@2.9.4″></script>
После того как Chart.js подключена, можно создать элемент на странице, в котором будет отображаться линейная диаграмма. Для этого нужно добавить на страницу тег <canvas> с уникальным идентификатором, который будет используется при инициализации диаграммы. Например:
<canvas id=»myChart»></canvas>
Затем, в JavaScript коде, нужно инициализировать диаграмму и передать ей данные, которые будут отображаться на графике. Следующий код демонстрирует, как это можно сделать:
const ctx = document.getElementById(‘myChart’).getContext(‘2d’);
const myChart = new Chart(ctx, {
type: ‘line’,
data: {
labels: [‘Янв’, ‘Фев’, ‘Мар’, ‘Апр’, ‘Май’, ‘Июн’],
datasets: [{
label: ‘Продажи’,
data: [12, 19, 3, 5, 2, 3],
fill: false,
borderColor: ‘rgb(75, 192, 192)’,
tension: 0.1
}]
}
});
В этом коде, мы инициализируем диаграмму с помощью конструктора Chart, передаем ей контекст элемента canvas (ctx), указываем тип диаграммы (type), создаем массив меток для оси X (labels) и массив данных для оси Y (data). Затем мы задаем некоторые параметры визуализации, такие как цвет границы линии диаграммы (borderColor) и напряженность кривой (tension).