Chart.js примеры создания диаграмм и графиков

chartjs-homepage-1827930

Если у вас есть насыщенный информацией веб-сайт или приложение, вы можете визуализировать свои данные, чтобы пользователи могли лучше понять их. Хотя таблицы могут быть весьма полезны в некоторых случаях, таких как таблицы сравнения цен и характеристик, другие виды информации легче обрабатывать с помощью некоторой визуализации данных. Библиотеки JavaScript, такие как Chart.js, позволяют создавать различные типы диаграмм HTML5, такие как линейные, барные, круговые, кольцевые диаграммы, графики и многое другое.

Chart.js — это универсальная библиотека, которая позволяет создавать диаграммы JavaScript за пару минут. Она имеет много опций, с помощью которых вы можете настроить все аспекты ваших графиков. В этой статье мы рассмотрим, как настроить библиотеку Chart.js, какие у вас есть варианты и чего вы можете достичь с помощью нее. Мы также создадим две диаграммы: гистограмму, показывающую ожидаемую продолжительность жизни в шести странах, и круговую диаграмму, показывающую рекомендуемый дневной рацион.

Добавление библиотеки Chart.js на HTML страницу

Вы можете установить Chart.js по-разному. Если вы хотите хранить всю библиотеку локально, вы можете установить ее с помощью менеджера пакетов npm, используя следующую команду:

npm install chart.js --save

Когда модуль установлен, добавьте свернутую версию в конец HTML-страницы перед закрывающим тегом следующим образом:

     
     
     

Ваш пользовательский скрипт будет в файле script.js. Кроме того, вы также можете добавить скрипты на свою страницу, используя загрузчики модулей, такие как CommonJS или Webpack.

Если вы не хотите хранить библиотеку Chart.js локально, вы можете добавить ее из CDN, используя следующий код:

     
     
     

Или вы можете клонировать последнюю версию Chart.js прямо из репозитория GitHub. Однако обратите внимание, что репозиторий GitHub не поставляется с предварительно собранной версией выпуска, поэтому вам нужно собрать библиотеку в один файл самостоятельно.

HTML-код

С помощью Chart.js вы можете добавлять диаграммы JavaScript на свою HTML-страницу, используя элемент . В своем HTML-файле добавьте следующий код внутри тега (над тегами ):

     

Chart.js поместит вашу диаграмму в элемент . Хотя диаграмма будет создана с помощью JavaScript, она появится на вашей странице в виде файла изображения в формате PNG. Теперь вам нужно добавить свою пользовательскую конфигурацию в файл script.js. Ниже мы покажем вам, как создавать два вида диаграмм: вертикальная гистограмма и круговая кольцевая (или круговая) диаграмма. Однако вы можете использовать ту же логику с любыми другими типами диаграмм. В документации Chart.js вы можете проверить все типы диаграмм, к которым у вас есть доступ.

chartjs-chart-types-8726216

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

Наша гистограмма будет отображать ожидаемую продолжительность жизни по набору данных страны из World Population Review. Она покажет шесть стран с самой высокой продолжительностью жизни, а именно:

Страна Продолжительность жизни (лет)
Гонконг 84.308
Макао 84.188
Япония 84.118
Швейцария 83.706
Испания 83.5
Сингапур 83.468

Мы создадим вертикальную гистограмму с интерактивными всплывающими подсказками, которые будут показывать точные данные, когда пользователь наводит курсор на столбцы. Однако обратите внимание, что также возможно создать горизонтальную гистограмму с помощью Chart.js. Ниже вы можете увидеть, как будет выглядеть наш график:

vertical-bar-chart-5195665

Для Chart.js требуются две переменные: одна, которая захватывает элемент HTML (ctx в приведенном ниже примере), а другая — пользовательский объект Chart (myChart ниже). Нам нужно добавить названия стран в качестве значения свойства меток. И мы определяем данные (ожидаемая продолжительность жизни в годах) как значение свойства данных массива наборов данных.

Следующий код входит в пользовательский файл script.js:

// Vertical bar chart
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Hong Kong', 'Macau', 'Japan', 'Switzerland', 'Spain', 'Singapore'],
        datasets: [{
            label: 'Life expectancy',
            data: [84.308, 84.188, 84.118, 83.706, 83.5, 83.468],
            backgroundColor: [
                'rgba(216, 27, 96, 0.6)',
                'rgba(3, 169, 244, 0.6)',
                'rgba(255, 152, 0, 0.6)',
                'rgba(29, 233, 182, 0.6)',
                'rgba(156, 39, 176, 0.6)',
                'rgba(84, 110, 122, 0.6)'
            ],
            borderColor: [
                'rgba(216, 27, 96, 1)',
                'rgba(3, 169, 244, 1)',
                'rgba(255, 152, 0, 1)',
                'rgba(29, 233, 182, 1)',
                'rgba(156, 39, 176, 1)',
                'rgba(84, 110, 122, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        legend: {
            display: false
        },
        title: {
            display: true,
            text: 'Life Expectancy by Country',
            position: 'top',
            fontSize: 16,
            padding: 20
        },
        scales: {
            yAxes: [{
                ticks: {
                    min: 75
                }
            }]
        }
    }
});

Документация к Chart.js действительно хороша, поэтому вы можете найти все опции, которые мы использовали выше (backgroundColor, borderColor, borderWidth и т. д.) На странице панели.

Создание кольцевой диаграммы на JavaScript

Теперь давайте создадим кольцевую диаграмму с библиотекой Chart.js. Он покажет распределение рекомендуемой суточной диеты в соответствии со следующим набором данных:

Молочные продукты 27.92%
Фрукты 17.53%
Диетическое мясо 14.94%
Овощи 26.62%
Цельнозерновые 12.99%

Здесь мы не будем показывать интерактивную подсказку, а отображаем метки данных и значения в верхней части диаграммы следующим образом:

chartjs-doughnut-chart-example-7714693

Установка плагина для меток данных

Поскольку Chart.js не имеет возможности отображать надписи в верхней части диаграмм, нам нужно использовать плагин Chart.js Data Labels. Chart.js позволяет разработчикам расширять функциональность по умолчанию, создавая плагины. В настоящее время на GitHub доступно пять плагинов Chart.js для следующих функций:

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

Плагин Chart.js Data Labels имеет довольно хорошую документацию. Вы можете найти все, что вам может понадобиться. Вы можете установить его с помощью менеджера пакетов npm, используя приведенную ниже команду, или добавить последнюю версию библиотеки из CDN.

npm install chartjs-plugin-datalabels --save

Пользовательский JavaScript

JavaScript использует тот же элемент , что и раньше, или, если вы хотите сохранить обе диаграммы, вы можете добавить новый холст в HTML с другим ID:

     

В JavaScript мы теперь определяем тип диаграммы как круговая. Остальная часть кода следует той же логике, что и раньше. Мы добавляем данные в качестве значений меток и свойств набора данных объекта данных.

// Doughnut chart
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Dairy', 'Fruits', 'Lean meats', 'Vegetables', 'Whole grains'],
        datasets: [{
            data: [27.92, 17.53, 14.94, 26.62, 12.99],
            backgroundColor: ['#e91e63', '#00e676', '#ff5722', '#1e88e5', '#ffd600'],
            borderWidth: 0.5 ,
            borderColor: '#ddd'
        }]
    },
    options: {
        title: {
            display: true,
            text: 'Recommended Daily Diet',
            position: 'top',
            fontSize: 16,
            fontColor: '#111',
            padding: 20
        },
        legend: {
            display: true,
            position: 'bottom',
            labels: {
                boxWidth: 20,
                fontColor: '#111',
                padding: 15
            }
        },
        tooltips: {
            enabled: false
        },
        plugins: {
            datalabels: {
                color: '#111',
                textAlign: 'center',
                font: {
                    lineHeight: 1.6
                },
                formatter: function(value, ctx) {
                    return ctx.chart.data.labels[ctx.dataIndex] + 'n' + value + '%';
                }
            }
        }
    }
});

Как вы можете видеть выше, мы добавили настройки плагинов Data Labels в свойство options.plugin кольцевой диаграммы. Метод formatter() размещает метки данных (например, «Цельнозерновые 12,99%») в верхней части нашего графика.

Создание круговой диаграммы с теми же данными

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

// Pie chart
var myChart = new Chart(ctx, {
    type: 'pie',

    /* rest of the code stays the same */
});

Это тот же набор данных, который представлен в виде круговой диаграммы:

chartjs-pie-chart-js-2827641

Вы также можете выбрать отображение только процентов, отредактировав метод formatter() следующим образом:

formatter: function(value) {
      return value + '%';
}

chart-js-pie-chart-only-percentages-6140405

Создание других типов диаграмм

С помощью Chart.js вы можете создавать множество других типов диаграмм, таких как линии, радары, полярные области, пузырьки, точечные диаграммы, области и смешанные диаграммы. В документации также есть страница Samples, где вы можете найти живые примеры всех типов диаграмм.

Хотя вы не можете напрямую получить код JavaScript примеров, вы можете получить к нему доступ с помощью инструментов разработчика вашего браузера (в большинстве браузеров вам нужно нажимать клавишу F12). Однако обратите внимание, что в реальных примерах используются переменные, отличные от тех, которые мы использовали в статье (что рекомендовано в официальных документах), поэтому вам нужно немного поработать с кодом:

chart-js-samples-code-7281953

Заключение

Добавление визуализации данных на вашу HTML-страницу может помочь пользователям понять ваш контент. Это может быть особенно полезно на образовательных сайтах, панелях администратора и целевых страницах.

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

Читайте также: