Данные в таблицах воспринимаются слушателями не всегда просто. Для визуализации информации в блоге на сайте или в презентации есть специальные библиотеки. Chart.js — одна из таких библиотек. В статье расскажем о ее особенностях, установке и создании диаграмм.
Что такое Chart.js
Chart.js — это поддерживаемая сообществом бесплатная библиотека JavaScript для создания диаграмм на основе HTML. При работе с Chart.js пользователю просто нужно указать, в каком месте страницы он хочет отобразить график. После этого необходимо указать Chart.js данные, метки и другие параметры. Остальным будет управлять сама библиотека.
Основные характеристики:
- бесплатная библиотека с открытым исходным кодом — ее можно использовать как в автономном, так и в онлайн-режиме;
- canvas — есть элемент canvas для динамических изображений;
- встроенные диаграммы — программа предоставляет пользователю различные встроенные диаграммы. Например, линейчатые, горизонтальные, радарные, пузырьковые;
- расширяемые пользовательские диаграммы — можно создавать пользовательские диаграммы с использованием дополнительных библиотек Chart.js;
- поддерживает современные браузеры — Chart.js поддерживает все современные браузеры;
- обширная документация — .js документация хорошо организована и содержит подробную информацию о каждой функции. Она проста для понимания и использования даже начинающими пользователями.
Как установить Chart.js
Сначала нужно установить Chart.js. Это можно сделать несколькими способами.
Использование CDN.
Это самый быстрый и простой способ включить Chart.js. Убедитесь, что вы взяли последнюю ссылку CDN с сайта https://cdnjs.com/libraries/Chart.js. Скопируйте URL-адрес, который содержит Chart.min.js в конце.
Установка с NPM.
Вы также можете установить Chart.js с помощью NPM. Скопируйте и вставьте приведенную ниже команду, чтобы загрузить ее в свой проект:
npm install chart.js --save
Создание диаграмм при помощи Chart.js
В Chart.js есть множество настроек для создания диаграмм. Можно легко реализовать все дизайнерские референсы.
Создание линейных диаграмм
Линейная диаграмма — это график, состоящий из точек, соединенных прямыми линиями. Ее можно использовать для визуализации изменений данных с течением времени и других типов взаимосвязей данных.
Импортируйте строку из библиотеки react-chartjs-2 в свой компонент React.
import { Line } from 'react-chartjs-2'
Импорт меток линейных диаграмм из Chart.js:
import {
Chart as ChartJS,
LineElement,
CategoryScale, //x-axis
LinearScale, //y-axis
PointElement,
Tooltip,
} from 'chart.js';Активируйте метки, зарегистрировав их, например, в качестве всплывающих подсказок. Это гарантирует, что метки будут отображаться при наведении курсора мыши на данные диаграммы:
ChartJS.register(
LineElement,
CategoryScale,
LinearScale,
PointElement,
Tooltip
);
Создайте объект state в вашем компоненте React для хранения данных для диаграммы:
const state = {
labels: ['Lagos', 'Usa', 'Canada', 'Australia'],
datasets: [
{
backgroundColor: ['blue', 'green', 'yellow', 'red'],
data: [30, 4, -5, 37],
borderColor: 'black',
},
],
};
Создайте функцию, которая возвращает JSX компонента React с данными, которые вы создали:
const Linechart = () => {
return (
<div>
<div>
<h1 className="font-extrabold">Temperature line chart</h1>
<div style={{width: '50%' }}>
<Line data={state} />
</div>
</div>
</div>
);
}
export default LinechartСкрипт на JS настраивает свойства масштаба диаграммы на JS для отображения сетки по осям x и y.
Следующие свойства отображения показывают сетку по обеим осям графика на JS:
- display — логическое значение, позволяющее включить или отключить отображение сетки на графике;
- color — цвет границы линии сетки;
- ширина линии — размер обводки линии сетки.
<!DOCTYPE html>
<html>
<head>
<title>Chart JS Gridlines - Line Chart Example</title>
<link rel='stylesheet' href='style.css' type='text/css' />
</head>
<body>
<div class="phppot-container">
<h1>Chart JS Gridlines - Line Chart Example</h1>
<div>
<canvas id="line-chart"></canvas>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/chart.js@4.0.1/dist/chart.umd.min.js"></script>
<script>
new Chart(
document.getElementById("line-chart"),
{
type : 'line',
data : {
labels : [ 1500, 1600, 1700, 1750, 1800,
1850, 1900, 1950, 1999, 2050 ],
datasets : [
{
data : [ 186, 205, 1321, 1516,
2107, 2191, 3133, 3221,
4783, 5478 ],
label : "America",
borderColor : "#3cba9f",
fill : false
},
{
data : [ 1282, 1350, 2411,
2502, 2635, 2809, 3947,
4402, 3700, 5267 ],
label : "Europe",
borderColor : "#e43202",
fill : false
} ]
},
options : {
title : {
display : true,
text : 'Chart JS Gridlines - Line Chart Example'
},
scales : {
x : {
grid : {
display : true,
color: "#0046ff",
lineWidth: 2
}
},
y : {
grid : {
display : true,
color: "#0046ff"
}
}
}
}
});
</script>
</body>
</html>
Создание столбчатых диаграмм
Столбчатая диаграмма — это метод отображения значений данных в виде вертикальных столбцов. Такие диаграммы часто используются для отображения динамики данных и сравнения более чем двух наборов данных рядом друг с другом.
Пример создания столбчатой диаграммы:
<!DOCTYPE>
<html>
<head>
<meta charset- "UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>chart.js</title>
</head>
<body>
<canvas id="chartId" aria-label="chart" height="350" width="580"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.1/helpers.esm.min.js">
</script>
<script>
var chrt = document.getElementById("chartId").getContext("2d");
var chartId = new Chart(chrt, {
type: 'bar',
data: {
labels: ["HTML", "CSS", "JAVASCRIPT", "CHART.JS", "JQUERY", "BOOTSTRP"],
datasets: [{
label: "online tutorial subjects",
data: [20, 40, 30, 35, 30, 20],
backgroundColor: ['yellow', 'aqua', 'pink', 'lightgreen', 'lightblue', 'gold'],
borderColor: ['red', 'blue', 'fuchsia', 'green', 'navy', 'black'],
borderWidth: 2,
}],
},
options: {
responsive: false,
},
});
</script>
</body>
</html>
Настройка отображения
Иногда браузер отображает диаграмму во весь экран. Это не соответствует ширине и высоте, которые устанавливают для элемента canvas.
<canvas id="myChart" width="800" height="400"></canvas>Чтобы это исправить, нужно добавить конфигурации к нашему экземпляру гистограммы. Для этого необходимо передать ему объект options, а затем установить для maintainAspectRation значение false.
var myChart = new Chart(ctx, {
type: 'bar',
data: {
......
},
options: {
maintainAspectRatio: false
}
})
Если вы повторите попытку в браузере, то увидите, что высота столбчатой диаграммы будет 400 пикселей, но ширина останется прежней. Чтобы контролировать ширину, нам нужно установить значение responsive=false.
.........
options: {
maintainAspectRatio: false,
responsive: false
}
Мы оформления графика можно использовать следующие свойства:
- background Color — принимает массив шестнадцатеричных или RGB значений цвета (строк), которые будут использоваться для окрашивания столбцов на графике;
- border Color — принимает массив строк значений цвета, аналогичный свойству background Color. Он будет окрашивать границы столбцов;
- ширина границы — принимает целое число или значение с плавающей точкой и определяет, насколько широкой должна быть граница.
Попробуем раскрасить столбцы. Для этого нужно добавить цвет фона с помощью массива, содержащего значения цвета RGBA, в свойство object in datasets:
....
data: stars,
backgroundColor: [
"rgba(255, 99, 132, 0.2)",
"rgba(54, 162, 235, 0.2)",
"rgba(255, 206, 86, 0.2)",
"rgba(75, 192, 192, 0.2)",
"rgba(153, 102, 255, 0.2)"
]