UI виджет JavaScript Organogram

Webix Organogram - это JavaScript (HTML) виджет для создания иерархических диаграмм, которые отображают связи между данными или представляют части сложных структур.

живое демо

  • Интеграция: jQuery, Angular, React, Vue.js, Backbone
  • Примеры интеграции с PHP, Node.js и .NET
  • Поддерживается во всех браузерах (IE8+)
  • Работает на устройствах с сенсорным экраном
  • Соответствует требованиям Секции 508
  • Удобная стилизация с помощью CSS

Легкое использование

Благодаря схожести структуры и API виджета Organogram и JavaScript Tree, работа с виджетом не займет много времени.

Настройка элементов

Каждый элемент диаграммы можно настроить. Webix позволяет установить размеры элемента, отступы и поля, а также использовать HTML для содержимого элемента.

Стилизация с CSS

Вы легко сможете изменить вид этого виджета. Вы сможете создавать неповторимые стили для виджета целиком или каждого его элемента с помощью CSS.

Выбор элементов

Вы можете разрешать выбор элементов Webix Organogram с помощью одной строки кода. Вы также можете добавлять обработчики событий для действий после выбора элемента.

Кликните по любому элементу.

Списки внутри блоков

Диаграммы с большим количеством веток можно сделать более понятными, разместив дочерние элементы одного уровня в виде списка.

Изменение блоков со списками

По умолчанию, блоки диаграммы со списками дочерних элементов выглядят как обычные неупорядоченные списки. Вы можете разделить элементы списка с помощью настроек, что поможет лучше передать их зависимость от общих родительских элементов диаграммы.

Встроенные блоки со списками

У любого элемента блока со списком могут быть дочерние элементы. Благодаря этому, можно визуализировать иерархии любой сложности и отображать всю цепь зависимостей внутри них.