Стандартная структура HTML-структура для Chart.js:
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<title>Charts</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/reset.min.css"/>
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div id="app">
<div class="container">
<h1 class="app__h1 app-h1">Chart</h1>
<div class="app__chart app-chart">
<!-- нас интересует данная часть -->
<div class="app-chart__canvas">
<canvas class="chart"></canvas>
</div>
</div>
</div>
</div>
<script src="js/chart.min.js"></script> <!-- подключаем плагин -->
<script src="js/main.js"></script>
</body>
</html>
Стандартные стили
body {
font-family: 'Rubik', sans-serif;
color: #333;
background: #fff;
}
.container {
padding: 0 32px;
}
.app-h1 {
text-align: center;
}
.app-chart__canvas {
position: relative;
max-width: 960px;
margin: 0 auto;
}
Плагин с минимальными настройками
document.addEventListener('DOMContentLoaded', () => { // структура документа загружена
new Chart( // инициализируем плагин
document.querySelector('.chart'), // первым параметром передаем элемент canvas по селектору
// вторым параметром передаем настройки в виде объекта
{
type: 'line', // тип графика, в данном случае линейный
data: { // общие данные графика в виде объекта
labels: ['April', 'May', 'June', 'July', 'August'], // метки по оси X
datasets: [ // набор данных, который будет отрисовываться в виде массива с объектами
{
label: 'Books read', // название для определенного графика в виде строки
data: [3, 6, 2, 7, 4] // данные в виде массива с числами, количество должно совпадать с количеством меток по оси X
}
]
},
options: {} // дополнительные опции для графика в виде объекта, если не нужны - передаем пустой объект
}
);
})
Добавить цвет для линий
document.addEventListener('DOMContentLoaded', () => {
new Chart(
document.querySelector('.chart'),
{
type: 'line',
data: {
labels: ['April', 'May', 'June', 'July', 'August'],
datasets: [
{
label: 'Books read',
data: [3, 6, 2, 7, 4],
borderColor: 'crimson' // назначаем цвет для линий в виде строки
}
]
},
options: {}
}
);
})
Изменим ширину линий
document.addEventListener('DOMContentLoaded', () => {
new Chart(
document.querySelector('.chart'),
{
type: 'line',
data: {
labels: ['April', 'May', 'June', 'July', 'August'],
datasets: [
{
label: 'Books read',
data: [3, 6, 2, 7, 4],
borderColor: 'crimson',
borderWidth: 5 // назначаем ширину линий
}
]
},
options: {}
}
);
})
Изменим тип графика на 'bar'
document.addEventListener('DOMContentLoaded', () => {
new Chart(
document.querySelector('.chart'),
{
type: 'bar', // изменили тип графика
data: {
labels: ['April', 'May', 'June', 'July', 'August'],
datasets: [
{
label: 'Books read',
data: [3, 6, 2, 7, 4],
borderColor: 'crimson',
borderWidth: 5
}
]
},
options: {}
}
);
})
Добавить столбцам фоновый цвет
document.addEventListener('DOMContentLoaded', () => {
new Chart(
document.querySelector('.chart'),
{
type: 'bar',
data: {
labels: ['April', 'May', 'June', 'July', 'August'],
datasets: [
{
label: 'Books read',
data: [3, 6, 2, 7, 4],
borderColor: 'crimson',
borderWidth: 5,
backgroundColor: 'crimson' // назначаем столбцам фон
}
]
},
options: {}
}
);
})
Сглаживание углов
document.addEventListener('DOMContentLoaded', () => {
new Chart(
document.querySelector('.chart'),
{
type: 'line', // вернули линейный тип
data: {
labels: ['April', 'May', 'June', 'July', 'August'],
datasets: [
{
label: 'Books read',
data: [3, 6, 2, 7, 4],
borderColor: 'crimson',
borderWidth: 5,
backgroundColor: 'crimson',
cubicInterpolationMode: 'monotone' // добавили сглаживание углов
}
]
},
options: {}
}
);
})
Залить линейный график цветом
document.addEventListener('DOMContentLoaded', () => {
new Chart(
document.querySelector('.chart'),
{
type: 'line',
data: {
labels: ['April', 'May', 'June', 'July', 'August'],
datasets: [
{
label: 'Books read',
data: [3, 6, 2, 7, 4],
borderColor: 'crimson',
borderWidth: 5,
backgroundColor: 'crimson',
cubicInterpolationMode: 'monotone',
fill: true // залили линейный график цветом
}
]
},
options: {}
}
);
})
По оси Y график начинался с нуля
document.addEventListener('DOMContentLoaded', () => {
new Chart(
document.querySelector('.chart'),
{
type: 'line',
data: {
labels: ['April', 'May', 'June', 'July', 'August'],
datasets: [
{
label: 'Books read',
data: [3, 6, 2, 7, 4],
borderColor: 'crimson',
borderWidth: 5,
backgroundColor: 'crimson',
cubicInterpolationMode: 'monotone',
fill: true
}
]
},
options: {
scales: {
y: {
beginAtZero: true // назначили оси Y начинать отсчет с нуля
}
}
}
}
);
})
Еще один график с другими значениями и цветом
document.addEventListener('DOMContentLoaded', () => {
new Chart(
document.querySelector('.chart'),
{
type: 'line',
data: {
labels: ['April', 'May', 'June', 'July', 'August'],
datasets: [
{
label: 'Books read',
data: [3, 6, 2, 7, 4],
borderColor: 'crimson',
borderWidth: 5,
backgroundColor: 'crimson',
cubicInterpolationMode: 'monotone',
},
// добавили еще один график с другими значениями и цветом
{
label: 'Books bought',
data: [5, 2, 3, 1, 4],
borderColor: 'teal',
borderWidth: 5,
backgroundColor: 'teal',
cubicInterpolationMode: 'monotone'
}
]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
}
);
})
Источник: https://frontips.ru/sozdayom-grafiki-na-osnove-plagina-chart-js/