mxGraph
Бібліотека діаграм JavaScript з відкритим кодом
Створюйте інтерактивні програми для графіків і діаграм за допомогою безкоштовної бібліотеки JavaScript із відкритим вихідним кодом.
mxGraph — це бібліотека діаграм JavaScript із відкритим вихідним кодом, яка надає функції для відтворення діаграм SVG і HTML. Для використання бібліотеки mxGraph не потрібне програмне забезпечення сторонніх розробників. Інша хороша річ полягає в тому, що він не потребує плагінів і може бути інтегрований практично в будь-який фреймворк. mxGraph надає функції, призначені для відображення інтерактивних діаграм і графіків. API надає всі стандартні функції для малювання, взаємодії та зв’язування контексту з діаграмою.
API використовує дуже поширену архітектуру, для цього потрібен веб-сервер, здатний обробляти HTML-сторінки, і веб-браузер, який підтримує JavaScript. Він переважно використовує один файл JavaScript, який містить усі функції бібліотеки. Цей файл завантажується на веб-сторінку HTML у розділі JavaScript і виконується в контейнері HTML у браузері
З одного погляду
Огляд функцій mxGraph.
- Створити діаграму
- Редагувати діаграму
- Відображення графіків.
- Підтримка сітки
- Підтримка форми
- Підтримка етикетки
- Діаграма стилю
- Використання шарів
- Діаграма злиття
- Підтримка смуги прокрутки
mxGraph підтримує формат електронних таблиць Excel, а також може експортувати дані у звичайні формати файлів.
Незалежність платформи
mxGraph вимагає лише JavaScript.
- Python 2.6 і вище
Початок роботи з 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за потреби очищає фон і встановлює відстань між лініями сітки в пікселях. Тепер малює реальну сітку.
