Создание диаграмм с помощью Chart.js
,

Создание диаграмм с помощью Chart.js

Содержание

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

Полную информацию о данной библиотеке вы можете найти в документации:

Документация

Данная библиотека упрощает создание различных графиков и диаграмм, включая логарифмические шкалы, временные диапозоны и так далее. Встроенные инструменты для работы с анимацией позволяют плавно изменять графики при обновлении данных и экспериментировать с цветовой палитрой.

Отличительная особенность Chart.js заключается в том, что создаваемые диаграммы автоматически адаптируются к изменениям размера окна браузера. Это позволяет им эффективно использовать всё доступное пространство на странице, изменяя свои размеры под разные экраны.

Установка библиотеки Chart.js

Вы можете скачать актуальную версию Chart.js с GitHub или добавить библиотеку в свой проект через CDN-ссылку. Также можно установить её через npm или bower, выполнив одну из следующих команд:

npm install chart.js --save
bower install chart.js --save

Исходный код доступен в двух вариациях: полная версия Chart.js и сокращённая Chart.min.js, которая включает библиотеку и парсер цветовой палитры. Если вы выберете сокращённую версию, для работы с временными шкалами нужно будет отдельно подключить Moment.js.

Создание диаграммы

После успешной установки библиотеки в ваш проект, вы можете спокойно приступать к созданию диаграмм или нужных графиков.

Библиотека Chart.js поддерживает создание следующих типов диаграмм:

  • Линейные диаграммы (Line Chart)
  • Столбчатые диаграммы (Bar Chart)
  • Горизонтальные столбчатые диаграммы (Horizontal Bar Chart)
  • Круговые диаграммы (Pie Chart)
  • Пончиковые диаграммы (Doughnut Chart)
  • Полярные диаграммы (Polar Area Chart)
  • Диаграммы рассеяния (Scatter Chart)
  • Радарные диаграммы (Radar Chart)
  • Комбинированные диаграммы (Mixed Chart)

Пример создания круговой диаграммы

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример круговой диаграммы с Chart.js</title>
    <link rel="stylesheet" href="styles.css"> 
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <!-- Подключаем Chart.js -->
</head>
<body>

    <canvas id="myPieChart" width="400" height="400"></canvas> <!-- Элемент для диаграммы -->
    
    <script src="script.js"></script>
    
</body>
</html>

CSS:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f4f4f4;
}

canvas {
    max-width: 100%;
    max-height: 100%;
}

JavaScript:

const ctx = document.getElementById('myPieChart').getContext('2d');
const myPieChart = new Chart(ctx, {
    type: 'pie',
    data: {
        labels: ['Красный', 'Синий', 'Желтый'], 
        datasets: [{
            label: 'Пример круговой диаграммы',
            data: [300, 50, 100], 
            backgroundColor: [
                'rgba(255, 99, 132, 0.7)',
                'rgba(54, 162, 235, 0.7)',
                'rgba(255, 206, 86, 0.7)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        responsive: true, 
        plugins: {
            legend: {
                position: 'top', 
            }
        }
    }
});

Пример выполнения данного кода:

Хочу посмотреть!

Пример создания радарной диаграммы

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Пример радиальной диаграммы с Chart.js</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>

    <canvas id="myRadarChart" width="400" height="400"></canvas>

    <script src="script.js"></script>
    
</body>
</html>

CSS:

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #e0f7fa;
}

canvas {
    max-width: 100%;
    max-height: 100%;
}

JavaScript:

const ctx = document.getElementById('myRadarChart').getContext('2d');
const myRadarChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ['Сила', 'Ловкость', 'Выносливость', 'Интеллект', 'Скорость', 'Харизма'],
        datasets: [{
            label: 'Характеристики игрока A',
            data: [65, 59, 90, 81, 56, 55],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            pointBackgroundColor: 'rgba(54, 162, 235, 1)',
        },
        {
            label: 'Характеристики игрока B',
            data: [28, 48, 40, 19, 96, 27],
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            pointBackgroundColor: 'rgba(255, 99, 132, 1)',
        }]
    },
    options: {
        responsive: true,
        plugins: {
            legend: {
                position: 'top',
            }
        },
        scales: {
            r: {
                beginAtZero: true,
            }
        }
    }
});

Пример выполнения данного кода:

Хочу посмотреть!

В этой радиальной диаграмме (Radar Chart) мы визуализируем данные по нескольким параметрам, распределённым по кругу. Она особенно полезна для сравнения различных характеристик или показателей между объектами.

Характеристика диаграммы:

Метки (labels) — в диаграмме используются шесть характеристик (Сила, Ловкость, Выносливость, Интеллект, Скорость, Харизма). Каждая метка соответствует одной из осей диаграммы.

Данные (datasets) — мы сравниваем двух игроков:

  • Игрок A имеет определённые значения для каждой из характеристик (например, Сила = 65, Ловкость = 59 и т.д.).
  • Игрок B имеет свои значения для тех же характеристик (например, Сила = 28, Ловкость = 48 и т.д.).

Визуальное представление:

  • Для каждого игрока строится замкнутая линия, соединяющая точки на диаграмме. Каждая точка на радиальной оси соответствует значению характеристики.
  • Площадь внутри линии заполнена цветом с прозрачностью, что делает сравнение между объектами более наглядным.

Настройки графика:

  • Диаграмма адаптивная (responsive), что позволяет ей изменяться в зависимости от размера экрана.
  • Радиальная шкала настроена так, чтобы начинаться с нуля (beginAtZero), что даёт более точное представление пропорций между показателями.

Радиальные диаграммы полезны для анализа многомерных данных, где важно сравнить не один параметр, а несколько сразу.

Подведём итоги

В заключение, приведённые примеры круговой и радиальной диаграмм — лишь малая часть того, что может предложить Chart.js. Эта библиотека открывает огромные возможности для создания любых графиков и диаграмм, позволяя гибко настраивать и визуализировать данные. Хотите отображать данные на шкале времени, создавать анимированные графики или комбинировать несколько типов диаграмм на одном полотне? Chart.js с лёгкостью справится с этим.

Keep coding and happy charting!

ChartJS, JS, Библиотека JS