mxGraph 

 
 

Бібліотека діаграм JavaScript з відкритим кодом

Створюйте інтерактивні програми для графіків і діаграм за допомогою безкоштовної бібліотеки JavaScript із відкритим вихідним кодом.

mxGraph — це бібліотека діаграм JavaScript із відкритим вихідним кодом, яка надає функції для відтворення діаграм SVG і HTML. Для використання бібліотеки mxGraph не потрібне програмне забезпечення сторонніх розробників. Інша хороша річ полягає в тому, що він не потребує плагінів і може бути інтегрований практично в будь-який фреймворк. mxGraph надає функції, призначені для відображення інтерактивних діаграм і графіків. API надає всі стандартні функції для малювання, взаємодії та зв’язування контексту з діаграмою.

API використовує дуже поширену архітектуру, для цього потрібен веб-сервер, здатний обробляти HTML-сторінки, і веб-браузер, який підтримує JavaScript. Він переважно використовує один файл JavaScript, який містить усі функції бібліотеки. Цей файл завантажується на веб-сторінку HTML у розділі JavaScript і виконується в контейнері HTML у браузері

Previous Next

Початок роботи з mxGraph

Рекомендований спосіб встановлення mxGraph — через npm, він доступний через менеджер пакунків npm. Щоб використовувати mxGraph як залежність, використовуйте npm install.

Встановіть mxGraph через npm

npm install mxgraph --save

Створення графіків за допомогою JavaScript API

Бібліотека mxGraph з відкритим вихідним кодом надає функції для створення діаграми або графіків за допомогою JavaScript. Він також підтримує зміну складних графіків шляхом створення нових редакторів графіків або їх налаштування. Спочатку вам потрібно створити графік у заданому контейнері, а потім ви можете легко додати клітинки до моделі, щоб побудувати графік. Ви можете легко додавати заголовки діаграм і розміщувати нотатки для кількох учасників. Бібліотека також надає додаткові функції, такі як візуальні ефекти, керування інтерфейсом користувача тощо.

Об’єднання двох графіків за допомогою JavaScript

mxGraph дозволяє програмістам об’єднувати два графіки у своїх власних програмах JavaScript. Перш за все, вам потрібно створити зразок графа всередині заданого контейнера. Будь ласка, зробіть усі клітинки круглими з білою жирною міткою. Тепер створіть другу графічну модель без контейнера. Додайте комірки до цільової моделі за один крок, використовуючи спеціальні ідентифікатори для вершин. Тепер ви можете об’єднати модель з другого графіка в модель першого графіка.

Малювання сітки за допомогою JavaScript

Бібліотека mxGraph дозволяє розробникам програмного забезпечення динамічно малювати сітку у своїх власних програмах JavaScript. Ви можете легко намалювати сітку динамічно за допомогою полотна HTML 5. Спочатку створіть графік у заданому контейнері та динамічно створіть сітку, для якої потрібне полотно. Вам потрібно змінити фільтрацію подій, щоб прийняти полотно як контейнер. Тепер cза потреби очищає фон і встановлює відстань між лініями сітки в пікселях. Тепер малює реальну сітку.

 Українська