Створення динамічних графіків швидко на D3 з Plottable.js
Безкоштовно Бібліотека D3.js є лише одним з багатьох, що дозволяє вам створення інтерактивної графіки на сторінці. Хоча D3 є, мабуть, найпопулярнішою з групи, навчитися використовувати її нелегко.
Ось чому Plottable.js є такою цінною бібліотекою. Це безкоштовний проект з відкритим кодом побудований поверх D3.js, полегшуючи для будь-кого створити Інтерактивні графіки даних з нуля.
Ця бібліотека обробляє всю брудну роботу, так що ви можете зосередитися на специфіці, такі як дані. Плотте генерує відповідний код для розміру та положення будь-якої обраної діаграми.
Кожна діаграма має свій власний компонент в Plottable, де можна скопіюйте / вставте код шаблону самостійно відновити діаграму. На момент написання статті ви можете вибрати 10 графічних стилів, включаючи гістограми, кругові діаграми, графіки розкидання та ділянки області.
Ти можеш відновлювати компоненти окремо і динамічно налаштовуйте їх налаштування. Таким чином, ви можете легко змінювати інтерактивні елементи, кольори, анімацію, позиціонування, розміри і все, що ще потрібно.
The повна бібліотека доступний на GitHub, якщо ви хочете переглянути вихідний код і завантажити копію.
Але найкращий спосіб навчитися через приклад. Ось чому ви повинні поглянути на їх зразкові графіки, які виконуються Plottable щоб побачити, як вона працює в дії.
Кожен граф повністю інтерактивний, з початковим кодом для завантаження. Якщо ви хочете відновити подібний графік, просто скопіюйте / вставте JS-код і переформатуйте в міру необхідності.
У мене є два особисті фаворити з їх сайту: Календар Heatmap за зразком плати діяльності GitHub Синхронізовані діаграми з функціями динамічного вибору.
Якщо ви ніколи не використовували D3.js, то ви будете намагатися вивчити цю бібліотеку. Особливо, тому що це написано в TypeScript, так що ви, ймовірно, також захочете підібрати це. Остаточний код скомпільовано в ES5 JavaScript, так і повинно працювати у всіх основних браузерах.
Якщо ви готові зануритися, погляньте на їх Сторінка підручників повні корисних ресурсів. Ви дізнаєтеся все, що потрібно для початку роботи з Plottable і to створювати динамічні веб-графіки з нуля.