Работа с Chart.js: Первое знакомство

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

К примеру, давайте взглянем на численность населения стран мира, представленную в виде таблицы:

СтранаНаселение

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

Когда мы имеем дело с диаграммами, то нам намного легче определить какой-то тренд или факт. К примеру достаточно будет взглянуть на график, и сразу станет ясно, что население США вдвое больше чем в Бангладеше, а число людей, живущих в Китае, в десять раз больше чем население России.

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 стал одним из основных языков веб-разработки. Уровень вовлечённости обеспечен множеством учебных материалов, а также тоннами готовых библиотек.

Статистические данные были взяты с сайта переписи населения.