GraphicsJS дозволяє створювати будь-яку веб-графіку, яку ви можете собі уявити

Спеціальні API для JavaScript - це майбутнє Інтернету. The рух відкритого джерела укупі з Графіка SVG відкрили можливості для веб-розробників.

GraphicsJS це безкоштовна бібліотека з відкритим кодом і JS API для створення власної графіки у веб-браузерах. Його можна використовувати як інструмент візуалізації для графічних даних, або він може бути використаний для створення чудового матеріалу просто щоб похвалитися.

На домашній сторінці ви знайдете великий розділ демонстрацій створений за допомогою GraphicsJS. І ці приклади просто подряпають поверхню того, що можливо.

Бібліотека використовує власний віртуальний DOM яка є абстракцією DOM браузера. Це дещо схожий на віртуальний DOM React і використовується подібним чином.

Оскільки ця бібліотека використовує клон DOM, він також потребує реальних елементів HTML працювати. Ось чому це використовує SVG / VML а не вбудовані об'єкти в полотні HTML5.

Цей графічний движок був спочатку вбудований у бібліотеку AnyChart. Звідти це було налаштований і відкритий джерело як власний JS API.

GraphicsJS підтримує всі основні браузери, навіть з IE6 та Chrome 1.0.

Всі вихідні коди доступна в репо GitHub, де ви можете завантажити копію і потиснути, якщо у вас є час. Але я думаю, що найкращим способом навчитися є занурення в голову.

Ви можете переглядати Документи API але я зазвичай вважаю ці документи зайвими. Документи найкраще використовувати, коли потрібно знайти певний метод або виклик API до посилання.

Якщо ви тільки починаєте, ви можете відвідати дитячий майданчик розміщено на веб-сайті AnyChart. Це гарне місце для пошуку зразки робочого коду щоб розбити синтаксис.

Або, якщо ви дійсно хочете почати з квадратного, то Графічний запуск керівництва може допомогти. Це більше схоже на “офіційний” документацію, щоб вона тримала вашу руку за плавна крива навчання порівняно з документами API.

У будь-якому випадку, мені подобається, що GraphicsJS був відкритим джерелом і випущений в спільноту розробників. Це далеко не ідеальна бібліотека, але вона є однією з найкращих для нас створення власної графіки SVG з нуля.

А щоб ваші передачі оберталися, нижче ви можете побачити зразок того, що ви можете побудувати за допомогою Graphics.js.