mxGraph
Библиотека диаграмм JavaScript с открытым исходным кодом
Создавайте интерактивные графические и графические приложения с помощью бесплатной библиотеки диаграмм JavaScript с открытым исходным кодом.
mxGraph — это библиотека для создания диаграмм JavaScript с открытым исходным кодом, которая предоставляет функции для визуализации диаграмм SVG и HTML. Для использования библиотеки mxGraph не требуется стороннее программное обеспечение. Другая хорошая вещь заключается в том, что он не требует плагинов и может быть интегрирован практически в любой фреймворк. mxGraph предоставляет функции, предназначенные для отображения интерактивных диаграмм и графиков. API предоставляет все обычно необходимые функции для рисования, взаимодействия и связывания контекста с диаграммой.
API использует очень распространенную архитектуру, для этого требуется веб-сервер, способный обрабатывать HTML-страницы, и веб-браузер, поддерживающий JavaScript. В основном он использует один файл JavaScript, содержащий все функции библиотеки. Этот файл загружается на веб-страницу HTML в разделе JavaScript и выполняется в контейнере HTML в браузере.
Начало работы с 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изучает фон, если требуется, и устанавливает расстояние между линиями сетки в пикселях. Теперь рисует реальную сетку.