Вступ
Інформація, яка має великий обсяг даних і представлена у вигляді тексту або таблиці, з великою вірогідністю буде позбавлена уваги.
Популярною бібліотекою, яку можна використовувати для створення різних типів діаграм, є Chart.js.Аналізувати, з'ясовувати факти, виявляти тенденції зручніше, коли інформація візуалізована, наприклад, дивлячись на колонки діаграми.
Встановлення та використання
1. Створюємо полотно на сторінці проекту
На сторінці сайту Chart.js копіюємо фрагмент коду
<canvas id="myChart"></canvas>
2. Включаємо Chart.js на нашу сторінку
Ви можете завантажити останню версію Chart.js з GitHub або використовувати посилання CDN, щоб включити його у свої проекти.
Фрагмент коду такий:
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
Остаточний варіант HTML-коду
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Chart.js</title>
</head>
<body>
<canvas id="myChart"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<script src="Krayn.js"></script>
</body>
</html>
Файл JS виглядає так:
var ctx = document.getElementById('myChart').getContext('2d');var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Китай","Індія", "США", "Індонезія","Бразилія", "Пакистан",
"Нігерія","Бангладеш", "Росія", "Японія"],
datasets: [{
label: "Густота населення",
backgroundColor: ['rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)',
'rgba(255, 159, 64, 0.6)',
'rgba(255, 99, 132, 0.6)',
'rgba(54, 162, 235, 0.6)',
'rgba(255, 206, 86, 0.6)',
'rgba(75, 192, 192, 0.6)',
'rgba(153, 102, 255, 0.6)'],
borderColor: 'rgb(255, 99, 132)',
data: [1379302771, 1281935911, 326625791, 260580739,
207353391, 204924861, 190632261, 157826578, 142257519, 126451398],
}]
},
options: {}
});
Немає коментарів:
Дописати коментар