Головна » Інструментарій » Створення динамічних графіків швидко на D3 з Plottable.js

    Створення динамічних графіків швидко на 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 створювати динамічні веб-графіки з нуля.