Работа с Chart.js: Первое знакомство
Зачастую люди плохо воспринимают данные, представленные в виде текста или таблицы. Во-первых, потому что это скучно, но в гораздо большей степени потому что в таком виде сложнее понять ценность представленных чисел.
К примеру, давайте взглянем на численность населения стран мира, представленную в виде таблицы:
СтранаНаселение
Китай | 1,379,302,771 |
Индия | 1,281,935,911 |
США | 326,625,791 |
Индонезия | 260,580,739 |
Бразилия | 207,353,391 |
Пакистан | 204,924,861 |
Нигерия | 190,632,261 |
Бангладеш | 157,826,578 |
Россия | 142,257,519 |
Япония | 126,451,398 |
Даже если таблица небольшая, то всё равно есть шанс, что человек бегло пробежится по ней и упустит какую-то информацию. Как правило, пользователь внимательно взглянет только на парочку стран, которые его интересуют больше других. Если бы эти же данные были представлены в виде диаграммы, человек без особого труда смог бы увидеть картину целиком, а именно соотношение населения разных стран.
Когда мы имеем дело с диаграммами, то нам намного легче определить какой-то тренд или факт. К примеру достаточно будет взглянуть на график, и сразу станет ясно, что население США вдвое больше чем в Бангладеше, а число людей, живущих в Китае, в десять раз больше чем население России.
Chart.js — это популярный инструмент, который предназначен для создания графиков и диаграмм. В данной серии уроков будут раскрыты все аспекты работы с этой библиотекой. Вы сможете создавать адаптивные диаграммы любой сложности на основе HTML5 Canvas.
Данная библиотека позволяет без особого труда создавать графики и диаграммы любого типа, а также выстраивать данные на диапазоне времени и логарифмической шкале. Также в неё встроены средства работы с анимацией, что позволит эффектно видоизменять графики в зависимости от новых данных, а также экспериментировать с цветом.
Давайте начнём с установки, а затем займёмся конфигурацией и другими настройками.
Установка
Вы можете скачать последнюю версию Chart.js с GitHub или подключить библиотеку к вашему проекту, используя CDN ссылку. Также установку можно осуществить через npm или bower, выполнив одну из нижеприведённых команд:
npm install chart.js --save bower install chart.js --save
Исходный код доступен в двух комплектациях. Полная версия Chart.js
и урезанная Chart.min.js
, включающая библиотеку Chart.js и парсер цветовой палитры. В случае выбора второго варианта для создания диаграмм со шкалой времени придётся к Chart.js отдельно подключить Moment.js.
В версии которая поставляется как Chart.bundle.js
или Chart.bundle.min.js
, Moment.js
уже подключён. Это избавит вас от необходимости подключать несколько отдельных файлов. Просто убедитесь в том, что Moment.js не будет подгружаться дважды. Это может привести к конфликту версий библиотеки.
Теперь когда мы определились с какой версией библиотеки будем работать, можем подключить код и приступить к созданию прикольных диаграмм.
<script src="path/to/Chart.min.js"></script> <script> var barChart = new Chart({...}) </script>
Создание диаграммы
Давайте представим таблицу с численностью населения стран мира в виде столбчатой диаграммы. На оси y отобразим цифры, а на оси x название стран. Для начала создадим элемент canvas с идентификатором popChart
.
<canvas id="popChart" width="600" height="400"></canvas>
Атрибуты width и height определяют размеры диаграммы. Для того чтобы график был адаптивным мы должны определить ширину и высоту элемента canvas.
Далее нам необходимо инициализировать класс Chart
. Сделать это можно, выбрав элемент страницы, инициировав библиотеку через jQuery или 2d контекст элемента canvas.
var popCanvas = $("#popChart"); var popCanvas = document.getElementById("popChart"); var popCanvas = document.getElementById("popChart").getContext("2d");
Всё что осталось сделать — передать параметры в конструктор:
var barChart = new Chart(popCanvas, { type: 'bar', data: { labels: ["China", "India", "United States", "Indonesia", "Brazil", "Pakistan", "Nigeria", "Bangladesh", "Russia", "Japan"], datasets: [{ label: 'Population', data: [1379302771, 1281935911, 326625791, 260580739, 207353391, 204924861, 190632261, 157826578, 142257519, 126451398], backgroundColor: [ 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)', 'rgba(255, 159, 64, 0.6)', 'rgba(255, 99, 132, 0.6)', 'rgba(54, 162, 235, 0.6)', 'rgba(255, 206, 86, 0.6)', 'rgba(75, 192, 192, 0.6)', 'rgba(153, 102, 255, 0.6)' ] }] } });
Chart.js извлечёт информацию из объекта который мы предали и нарисует соответствующий график. В параметре type
необходимо указать тип диаграммы. Данное поле может принимать одно из следующих значений: line
, bar
, radar
, polarArea
, pie
, doughnut
или bubble
. В данной серии статей мы рассмотрим в отдельности каждый вид.
Сами данные передаём через ключ data. В опции backgroundColor
можем указать цвет, в который окрасятся столбцы диаграммы. По умолчанию данное значение равно 'rgba(0,0,0,0.1)'
.
На самом деле для каждого типа диаграмм характерны особые характеристики. В результате мы получим следующий результат:
http://codepen.io/Shokeen/pen/xqdJpL
Для того чтобы увидеть конкретные цифры достаточно подвести курсор мыши к тому или иному столбцу. Можно заметить что размеры графика не соответствую выставленным нами ранее. Зато диаграмма полностью адаптивна под различные устройства.
Если вам необходимо чтобы диаграмма была одного и того размера на всех устройствах, то поставьте значение false
в поле responsive
.
Конфигурация настроек
Chart.js позволяет полностью настроить отображение созданной диаграммы. К примеру вы можете задать цвет и ширину рамки каждого столбца. Также можно выбрать цвет и шрифт надписей. Сейчас мы ознакомимся со всеми ключевыми словами, которые задействованы в стилизации элементов диаграмм.
Все настройки шрифтов обеспечиваются значениями переменных полей defaultFontFamily
, defaultFontSize
, defaultFontStyle
и defaultFontColor
. Размер шрифта указывается в пикселях. К ярлыкам линейной шкалы radialLinear
не применяется. Аналогично, defaultFontStyle
не применяется к заголовкам всплывающих подсказок.
Chart.defaults.global.defaultFontFamily = "Lato"; Chart.defaults.global.defaultFontSize = 18; Chart.defaults.global.defaultFontColor = 'blue';
Теперь диаграмма примет несколько иной вид за счёт смены шрифтов. Данный приём позволит вам подогнать графики под стиль вашего сайта.
http://codepen.io/Shokeen/pen/KWmxNW
Также вы можете видоизменить легенду, которая отображается на графике. Конфигурационные настройки необходимо поместить в область options.legend
. Для того чтобы оформление применялось к легендам всех графиков следует задействовать опцию Chart.defaults.global.legend
. Позиционирование блока осуществляется через ключ position
, принимающий четыре значения: top
, left
, bottom
и right
. Также вы можете скрыть легенду, изменив значение опции display
.
Помимо основного блока легенды вы можете видоизменить её метку. Делается это через значение поля label
. Ширина данного элемента выставляется в опции boxWidth
. Значение по умолчанию — 40.
Тип шрифта, размер, цвет и стили зависят от глобальных настроек. Изменить их можно, поэкспериментировав с опциями fontSize
, fontStyle
, fontFamily
и fontColor
.
var barChart = new Chart(popCanvas, { type: 'bar', data: data, options: { legend: { display: true, position: 'bottom', labels: { boxWidth: 80, fontColor: 'rgb(60, 180, 100)' } } } });
За отображение подсказок отвечает область настроек options.tooltips
. По аналогии с Chart.defaults.global.tooltips
можно задать глобальные значения. Для включения/отключения данного блока необходимо выставить соответствующее значение в поле enabled
. Значение false
— отключит отображение подсказок. По умолчанию равно true
.
Вдобавок вы можете контролировать “поведение” подсказок через ключ intersect
. При значении true
(выставлено по умолчанию), подсказки будут всплывать при наведении курсора мыши. При false
, подсказки будут отображены в соответствии с режимом, выбранным в опции mode
.
Через значение настройки mode
мы можем контролировать вид подсказок. По умолчанию данная настройка стоит в режиме nearest
. Когда intersect
будет равен false
, то будет пользователь увидит ближайшую подсказку.
Как и в случае оформления легенд, вы можете задать цвет и фон подсказок. Разница в том, что тут вам придётся указать разные стили для заголовка, основного блока и нижней части.
Для того чтобы задать фон и стили, следует выставить значение опций bodyFontFamily
, bodyFontSize
, bodyFontStyle
и bodyFontColor
. Оформление заголовка и нижней части потребует дополнительные значения для полей titleMarginBottom
и footerMarginTop
. Таким образом можно выставить небольшие отступ между внутренними элементами блока.
Точно таким же образом можно выставить отступы справа и слева, воспользовавшись свойствами xPadding
и yPadding
.
Размер подсказки контролируется через ключ caretSize
. Цвет фона может быть изменён в опции backgroundColor
.
var barChart = new Chart(popCanvas, { type: 'bar', data: data, options: { tooltips: { cornerRadius: 0, caretSize: 0, xPadding: 16, yPadding: 10, backgroundColor: 'rgba(0, 150, 100, 0.9)', titleFontStyle: 'normal', titleMarginBottom: 15 } } });
Поскольку полю caretSize
мы выставили значение 0, каретка будет скрыта. Взглянуть на реализацию данного примера можно ниже. Проведите курсором по столбцам чтобы увидеть эффект.
http://codepen.io/Shokeen/pen/LWyJow
Финальные мысли
В этом уроке мы начала знакомство с библиотекой Chart.js и показали процесс создания столбчатых диаграмм. Также нами был затронут целый ряд настроек с помощью которых мы можем контролировать вид графиков.
В этом уроке была рассмотрена только столбчатая диаграмма. Это отличный выбор ведь её настройки являются общими и для других видов. В следующем уроке мы продолжим знакомство с библиотекой и затронем работу с линейными графиками.
Де-факто JavaScript стал одним из основных языков веб-разработки. Уровень вовлечённости обеспечен множеством учебных материалов, а также тоннами готовых библиотек.
Статистические данные были взяты с сайта переписи населения.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://code.tutsplus.com/tutorials/getting-started-with-chartjs-introduction--cms-28278
Перевел: Станислав Протасевич
Урок создан: 25 Апреля 2017
Просмотров: 31684
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.