Безкоштовні онлайн матеріали книги, статті, переклади ОС GNU
"Контент – це король". Всі ми чули або читали цю фразу, в якій висловлено важливість якісного змісту ресурсу для підвищення конверсії сайту, як наслідок хорошої пошукової оптимізації. Однак, у той час як якісне текстове наповнення чудово працює для пошукових машин, часто буває так, що відвідувачам сайту набагато простіше зрозуміти основну інформацію сайту, дивлячись на зображення чи діаграму.
Наприклад, якщо конкретний сайт спеціалізується на висвітленні питань будь-яких досліджень, опис самих досліджень, звичайно ж, є важливою інформацією; але діаграма, в якій узагальнюються дані дослідження, буде не менш корисною для відвідувачів цього сайту.
Що таке Chart.js
Бібліотека Chart.js не має жодних залежностей; розмір її такий малий, що становить приблизно 11Kb у мініфікованому, конкатенованому та архівованому вигляді. Однак, є можливість ще зменшити розмір бібліотеки шляхом включення до неї лише тих модулів, які необхідні у конкретному випадку; тобто, якщо немає необхідності підтримувати всі шість типів діаграм, включених за замовчуванням в ядро Chart.js.
Наприклад, якщо на конкретній сторінці потрібно створити лише діаграму лінійного типу (bar chart), то можна підключити лише ядро бібліотеки Chart.js та модуль, за допомогою якого створюються діаграми такого типу; таким чином, буде зменшено загальний розмір бібліотеки Chart.js та збільшено швидкість завантаження сайту в цілому.
Інший чудовою особливістю бібліотеки Chart.js є той факт, що створювані нею адаптивні діаграми; тобто, вони можуть змінювати свій розмір за зміни розмірів вікна браузера таким чином, щоб ефективно займати все доступне для цьогопростір сторінки.
І нарешті, на відміну від багатьох інших подібних бібліотек, які можна знайти на просторах Інтернет, Chart.js має докладну і добре викладену документацію, за допомогою якої можна легко створювати як прості, так і складні зразки діаграм.
У наступному розділі статті буде розглянуто процес отримання та підключення бібліотеки Chart.js до поточного проекту.
Початок роботи з Chart.js
Перед використанням бібліотеки Chart.js її необхідно завантажити та підключити до сторінки, на якій планується створити одну або декілька діаграм. Існує два способи отримати бібліотеку Chart.js. Перший спосіб полягає у використанні GitHub репозиторію. Другий спосіб – це скористатися менеджером Bower за допомогою команди такого виду:
У наведеному прикладі зверніть увагу на заголовну літеру в імені бібліотеки Chart.js, що підключається. Це не дуже простий метод, коли ім'я бібліотеки, що підключається, починається з великої літери. Тому, якщо після підключення Chart.js на сторінці відображається 404 помилка, то знайте, в чому полягає ця помилка.
Після підключення бібліотека Chart.js надає всі вбудовані методи через глобальну змінну з ім'ям Chart. Тепер все готове для того, щоб створити першу нашу діаграму.
Для цього необхідно ініціалізувати новий Chart-об'єкт шляхом передачі 2d-контексту елемента canvas , який буде використовуватися для створення в ньому діаграми. Щоб зрозуміти основну ідею цього кроку, уявімо, що на сторінці є наступний елемент:
Якщо потрібно в цьому елементі намалювати кругову діаграму (pie chart), то пишеться таке вираз:
де аргумент data , не представлений у цьому прикладі, є змінною, в якіймістяться дані для відображення у діаграмі.
Тепер, коли нам відомі основні принципи підключення Chart.js, настав час переходити до конкретних прикладів. Для стислості викладення матеріалу я використовуватиму в наведених нижче прикладах повну версію бібліотеки Chart.js; але за бажання читач може знайти всі необхідні модулі окремо, у директорії "src".
Створення кругової діаграми
У цьому розділі статті буде показаний приклад створення кругової діаграми, в якій представлені професійні навички гіпотетичного web-розробника (до цієї діаграми буде включено мову Java, тому цим гіпотетичним розробником я не можу бути жодною мірою).
Як вже можна було здогадатися, першим кроком буде створення нового елемента canvas, в якому і промальовуватиметься кругова діаграма:
Тепер необхідно скористатися даними, які відображатимуться в діаграмі. У реальному житті такі дані виходять із сервера будь-яким чином; в нашому випадку буде використовуватися статичний варіант, без використання сервера. Для кругової діаграми необхідно отримати масив об'єктів, кожен з яких має кілька властивостей.
Однак, для простоти та легкості розуміння ці об'єкти будуть мати мінімум властивостей - значення, яке буде відображено в діаграмі; колір сектора на круговій діаграмі; напис для сектора:
На завершення, як було показано в попередньому розділі статті, необхідно отримати 2d-контекст конкретного canvas-елемента та ініціалізувати новий Chart-об'єкт:
Нижче наведено приблизний результат того, що можна отримати за допомогою бібліотеки Chart.js:
Результатом наведеного вище коду буде кругова діаграма (pie chart), код якого можна побачити на сторінці прикладу – PieChart JSFiddle.
Створення стовпцевої діаграми
У наступному прикладі буде створено стовпцеву (bar chart) діаграму, на якій буде відображено динаміку зміни кількості клієнтів гіпотетичної компанії залежно від їхньої національності, за 2010 рік та за 2014 рік. Також, як і в попередньому прикладі, для цієї мети використовуватиметься елемент canvas , розміщений на сторінці у вигляді такого прикладу:
Потім створюємо дані для нашої вигаданої компанії:
Як видно з прикладу, для створюваної стовпцевої діаграми необхідно представити об'єкт, що містить властивість з ім'ям labels, всередині якого розміщені предмети порівняння - те, що порівнюватиметься між собою. У нашому випадку цими предметами є назви країн: Italy, UK, USA, Germany, France, Japan.
На додаток до цього нам необхідно надати ще одну властивість, на ім'я datasets , в якому розміщені набори об'єктів, кожен з яких містить дані для порівняння. У нашому випадку буде порівнятися між 2010 і 2014 роком, тому нам знадобиться тільки два об'єкти.
Всередині кожного з цих об'єктів необхідно встановити мітку для візуальної підказки на діаграмі, значення для кожного з об'єктів; а також колір заливки для кожної з ділянок діаграми.
В результаті код для створення стовпцевої діаграми (bar chart) повинен бути таким:
Нижче наведено приблизний результат того, що можна отримати за допомогою бібліотеки Chart.js:
Результатом створеного нами вище коду буде стовпцева діаграма (bar chart), вихідний код якого можна подивитися за цим посиланням - Bar Chart JSFiddle.
Висновок
Бібліотека Chart.js також надає кілька додаткових можливостей, про які я не згадав у цій статті. АлеВи можете легко заповнити свою прогалину в цих знаннях і почитати офіційну документацію.
Чи були ви знайомі з цією бібліотекою раніше і чи використовували її у своїй практиці? Як часто та в яких проектах ви її використовували? Якщо ні, то яку іншу бібліотеку такого типу ви використовували?