Advertisement
  1. Web Design
  2. Data Visualization

Візуалізація даних за допомогою DataTables.js та  Highcharts.js

by
Read Time:7 minsLanguages:

Ukrainian (українська мова) 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 - oб'єктна модель документа) - дерева виконується функція init. Ця функція запускає інші підфункції:

Як ви побачите, кожна з цих підфункцій виконує певне завдання.

Ініціалізація таблиці виду ’DataTables’

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

Якщо ми зараз подивимося на таблицю, то помітимо, що вона отримала можливості таблиці виду ’DataTables’, тобто: ми можемо проводити в ній сортування даних, виконувати пошук по ній тощо. Поекспериментуйте з нею в наступній демоверсії:

Як ви бачите, тепер завдяки використанню DataTables до таблиці застосовується сортування за налаштуванням. За необхідності ми можемо змінити її параметри.

Добування даних таблиці

Наступний крок - це добування даних таблиці та побудування графіка. Нам не потрібні всі дані таблиці. Дійсно, якщо ви подивитеся на кінцеву версію нашої демонстраційної програми, то помітите, що на графіку наведені лише дані перших трьох стовпців (* Country - Країна, Population - Чисельність населення, Density - Густота населення).

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

Усередині цієї функції ми пробігаємося по рядкам таблиці, добуваємо із кожного рядка дані необхідного стовпця та зберігаємо їх у відповідних масивах. Наприкінці всі ці масиви зберігаються усередині іншого масиву.

Нижче наведено стислу візуалізацію основного (тобто dataArray) масиву:

The array which holds the desired table dataThe array which holds the desired table dataThe 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
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.