Основы использования библиотеки Chart.js

При разработке админ-панелей, часто возникает необходимость визуализировать данные, например к-во посещений в течении месяца — в этом нам поможет Chart.js.

Chart.js — JavaScript библиотека для создания различных типов графиков и диаграм.

  • Cкачаем и подключим библиотеку. Можно также использовать CDN.
  • Создадим элемент canvas в котором будем выводить нашу диаграмму
  • Обращаемся к нашему элементу и передаем набор параметров для создания требуемой нам диаграммы
  • Если мы используем элемент canvas то мы должны использовать метод getContext('2d')
  • Можем определить значения некоторых свойств по умолчанию
  • Различные типы диаграм закомментированны, но вы можете попробовать каждый и протестировать другие параметрами библиотеки

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Chart.js Charts</title>
    <link rel="stylesheet" href="css/chart.css">
    <script src="js/chart.js"></script>
</head>
<body>
    <canvas id="myChart"></canvas>
    <script>
        let myChart = document.getElementById('myChart').getContext('2d');

        // Global options
        Chart.defaults.global.defaultFontFamily = 'Segoe UI';
        Chart.defaults.global.defaultFontSize = 18;
        Chart.defaults.global.defaultFontColor = '#777';

        let massPopChart = new Chart(myChart, {
            type: 'bar', // bar, horizontalBar, pie, line, doughnut, radar, polarArea
            data: {
                labels: ['Boston', 'Worcester', 'Springfield', 'Lower', 'Cambridge', 'New Bedford'],
                datasets: [{
                    label: 'Popolation',
                    data: [
                        23425,
                        23423,
                        56345,
                        45745,
                        67567,
                        44334
                    ],
                    // backgroundColor: 'green',
                    backgroundColor: [
                        '#7FFFD4',
                        '#FFE4C4',
                        '#8A2BE2',
                        '#DEB887',
                        '#5F9EA0',
                        '#FF7F50',
                    ],
                    borderWidth: 1,
                    borderColor: '#ddd',
                    hoverBorderWidth: 3,
                    hoverBorderColor: '#333'
                }]
            },
            options: {
                title: {
                    display: true,
                    text: 'Largest Cities in Massachusetts',
                    fontSize: 25
                },
                legend: {
                    // display: false,
                    position: 'right',
                },
                labels: {
                    fontColor: '#000'
                },
                layout: {
                    padding: {
                        left: 50,
                        right: 0,
                        bottom: 0,
                        top: 0
                    }
                },
                tooltips: {
                    // enabled: false
                }
            }
        });
    </script>
</body>
</html>

Больше примеров и параметров для настройки ваших диаграм вы сможете найти в документациии.

Отправить

Похожие посты


Владимир Камуз

Фрилансер Full Stack WordPress разработчик из Украины. Работаю в основном на международной бирже фриланса Upwork.

Добавить комментарий

Email рассылка

Еженедельный дайджест последних добавленных обучающих материалов. Подпишитесь на Email рассылку, чтобы не пропустить полезную информацию о фрилансе на Upwork и веб-разработке.