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

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

13 марта 2020 JavaScript Разное

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

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

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

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

npm install chart.js --save

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

<body>
     <!-- HTML content -->
     <script src="node_modules/chart.js/dist/Chart.bundle.min.js"></script>
     <script src="script.js"></script>
</body>

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

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

<body>
     <!-- HTML content -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
     <script src="script.js"></script>
</body>

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

HTML-код

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

<div class="container">
     <canvas id="myChart" width="600" height="400"></canvas>
</div>

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

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

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

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

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

Для 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%

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

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

Поскольку 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 использует тот же элемент <canvas>, что и раньше, или, если вы хотите сохранить обе диаграммы, вы можете добавить новый холст в HTML с другим ID:

<div class="container">
     <canvas id="myChart" width="600" height="400"></canvas>
</div>

В 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 */
});

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

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

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

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

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

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

Заключение

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

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

Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
Хостинг, которым я пользуюсь

Хочу рассказать об очень классном хостинге, которым я начал пользоваться примерно год назад - это beget.ru. До этого мне приходилось иметь дело с разными хостинг-компаниями и все, что я расскажу основано на моем личном многолетнем опыте. Долгое время я пользовался Читать далее

Git для начинающих

Git - это бесплатная система контроля версий с открытым исходным кодом. Это звучит невероятно скучно до тех пор, пока вам не понадобится вернуться к предыдущей версии кода, и сделать это удачно. Это программное обеспечение, которое управляет вашим исходным кодом, снимая Читать далее

Instagram виджет для сайта

К сожалению в Instagram нет стандартного функционала для вывода виджета на сайт, такого как например Вконтакте и Facebook. Но есть несколько способов создать подобный виджет. Первый это написать такой самому, второй воспользоваться готовым кодом конструктора. По сути конструктор это тоже Читать далее

Бесплатный фотосток без регистрации

freepic - это бесплатный фотосток, поддерживающий русский язык, на котором можно совершенно бесплатно и без регистрации скачать векторы, PSD, иконки и фотографии. И конечно же легально использовать их на своих ресурсах. Сайт: ru.freepik.com У сервиса есть удобный поиск с фильтром Читать далее

Как очистить кэш шаринг постов в соц сетях

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

Определить CMS сайта плагин

Wappalyzer - это кроссплатформенная утилита, которая определяет технологии, используемые на веб-сайтах. Она обнаруживает системы управления контентом, платформы электронной коммерции, веб-фреймворки, серверное программное обеспечение, аналитические инструменты и многое другое. Установить Weppalyzer можно как плагин для браузеров Google Chrome и Firefox, а Читать далее

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

*

code