Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Data Visualization

Визуализация данных при помощи DataTables.js и Highcharts.js

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Из данного руководства вы узнаете, как визуализировать данные, воспользовавшись библиотеками JavaScript DataTables.js и Highcharts.js.

Вот, что мы будем создавать (гляньте более крупную версию для лучшего восприятия):

Необходимые библиотеки

Для целей этого примера нам необходимо будет загрузить следующие библиотеки в наш пэн (* проект. Здесь и далее примеч. пер.):

  • jQuery
  • DataTables.js
  • Highcharts.js

Помня об этом, при переходе на вкладку Settings (* Настройки) вы увидите, что я подключил один внешний файл CSS (* Cascading Style Sheets - каскадные таблицы стилей):

Подобным образом я также подключил четыре внешних файла JavaScript:

Примечание: нам необходимо добавить библиотеку jQuery в наш проект, поскольку DataTables.js является плагином jQuery. Однако, помните, что Highcharts.js является библиотекой на чистом JavaScript, и поэтому используется без jQuery.

Код HTML

Для начала мы определяем элемент класса container, который содержит два подэлемента:

  • Таблицу с 26 строками. Первая строка относится к заголовкам таблицы th, а остальные 25 строк содержат подробности о странах. Источником данных нашего примера является worldometers.info.
  • Пустой элемент div, в котором будет располагаться диаграмма.

Ниже располагается структура кода HTML:

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

После создания разметки документа HTML и добавления цвета фона для разборчивости проект выглядит следующим образом:

Код CSS

На данном этапе мы определяем некоторые основные стили следующим образом:

Необходимо, чтобы вы понимали, что:

  • В нашей разметке идентификатор #dt-table_wrapper отсутствует. Он добавляется плагином DataTables, как только мы его инициализируем.
  • Несмотря на то, что мы определяем несколько правил для маленьких экранов, обратите внимание, что демоверсия не будет соответствовать всем требованиям отзывчивого веб-дизайна. Есть множество дополнений, которые мы можем внести для улучшения вида таблицы и диаграммы на устройствах с маленьким экраном. Например, для DataTables имеется расширение Responsive. Но это выходит за рамки обсуждаемой в этом руководстве темы.

После создания CSS давайте посмотрим, как выглядит проект. Пока что мы не заметим большой разницы, поскольку мы не инициализировали библиотеку:

Код JavaScript

Теперь переходим к окну JavaScript нашего пэна. После построения DOM (* Document Object Model - объектная модель документа) - дерева выполняется функция init. Эта функция запускает другие подфункции:

Как вы увидите, каждая из этих подфункций выполняет определенное задание.

Инициализация таблицы вида ’DataTables’

Сначала нам необходимо преобразовать нашу таблицу в таблицу вида ’DataTables’. Мы можем это осуществить всего лишь при помощи одной строки кода: $("#dt-table").DataTable();

Если мы теперь посмотрим на таблицу, то заметим, что она приобрела возможности таблицы вида ’DataTables’, то есть: мы можем проводить в ней сортировку данных, осуществлять поиск по ней и т.д. Поэкпериментируйте с ней в следующей демоверсии:

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

Извлечение данных таблицы

Следующий шаг - это извлечение данных таблицы и построение графика. Нам не нужны все данные таблицы. Действительно, если вы посмотрите на окончательную версию нашей демонстрационной программы, то заметите, что на графике приведены только данные первых трех столбцов (* Country - Страна, Population - Численность населения, Density - Плотность населения).

Помня об этом, для того чтобы получить необходимые данные, мы воспользуемся API (* Application Programming Interface - программный интерфейс приложения) DataTables. Для реализации вышесказанного имеется следующая функция:

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

Ниже приведена краткая визуализация основного (то есть dataArray) массива:

The array which holds the desired table data

Перед тем, как идти далее, необходимо понять одну вещь. По умолчанию функция getTableData должна извлекать данные из всех строк таблицы. Но если мы осуществляем поиск чего-то определенного в таблице, то только строки, удовлетворяющие критериям поиска, должны извлекаться и обрабатываться. Для осуществления этого мы передаем в функцию rows параметр. Это объект, свойству search которого присвоено значение "applied".

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

Построение графика

Теперь, когда у нас имеются необходимые данные, мы готовы к построению графика. Он будет включать два вложенных графика: столбчатую диаграмму и сплайновую кривую.

Ниже приводится соответствующая функция:

Не пугайтесь кода выше! Без сомнений, лучшим способом понять, как он работает, является практика. Также вам определенно стоит почитать документацию. Тем не менее, давайте подчеркнем основные моменты:

  • По оси Х у нас расположены страны.
  • Мы устанавливаем две оси Y. По одной у нас имеются значения численности населения, по другой - все доступные значения плотности населения.
  • При отсутствии данных графика появляется соответствующее сообщение. Заметьте, что мы можем настраивать текст сообщения при помощи объекта lang.

После построения графиков давайте снова посмотрим на наш прогресс:

Синхронизация таблицы и графиков

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

Чтобы это исправить, мы воспользуемся событием draw библиотеки DataTables. Это событие генерируется каждый раз, когда обновляется таблица. Поэтому, как только мы изменяем таблицу, нам необходимо заново извлечь данные таблицы и вновь построить график.

Однако, есть подвох. Событие draw также генерируется при переходе по страницам таблицы. Нет смысла перестраивать график в это время. В идеале нам следует предотвратить это поведение. К счастью, имеется событие page, при помощи которого мы можем это осуществить.

Ниже приводится код для реализации требуемой функциональности.

Теперь, когда таблица и график синхронизированы, при выполнении «неправильного» поискового запроса (* запрос данных, которых нет в таблице) мы увидим следующие сообщения:

Вот наша окончательная версия проекта:

Поддержка браузерами

Оба плагина отлично поддерживаются браузерами (поддержка DataTables, поддержка Highcharts). Поэтому вы можете ожидать, что эта демоверсия будет хорошо работать во всех недавно вышедших версиях браузеров.

Опять-таки помните, что эта демо не оптимизирована для устройств с маленьким экраном.

В заключение, как обычно, мы используем Babel (* транспилятор) для компиляции кода, соответствующего спецификации ES6, в код, соответствующий стандарту ES5.

Вывод

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

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

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.