Организационная диаграмма (или просто организационная диаграмма) — один из наиболее широко используемых типов диаграмм, представленных в нашем компоненте построения диаграмм JavaScript. Веб-разработчики интегрируют организационные диаграммы JavaScript в бизнес-приложения для графического представления корпоративной организации компании и ее внутренней структуры отчетности с использованием фигур, связанных линиями в иерархическом порядке (отношения родитель-потомок). И если эта функциональность является текущей целью вашего проекта, вы открыли правильную страницу.
В этом сообщении блога мы рассмотрим основные функции нашего компонента диаграммы, предназначенного для достижения ваших целей визуализации данных, и более подробно рассмотрим два подхода к построению организационных диаграмм с помощью DHTMLX.
Чего ожидать от библиотеки диаграмм DHTMLX
Прежде всего, давайте рассмотрим основные функции DHTMLX Diagram, типичные для наших продуктов JavaScript. Наиболее примечательны из них следующие:
- улучшенная производительность во всех современных браузерах,
- интеграция с популярными фреймворками JavaScript (Angular, React, Vue.js),
- родной опыт на любом сенсорном устройстве,
- полная локализация интерфейса,
- экспорт в форматы PDF, PNG и JSON,
- Поддержка TypeScript для более быстрого кодирования и улучшения обслуживания кода.
Теперь перейдем к центральному вопросу этого поста.
Подходы к визуализации структуры компании с помощью диаграммы DHTMLX
Диаграмма DHTMLX очень гибкая, когда дело доходит до визуализации иерархических структур с помощью различных типов диаграмм, включая организационные диаграммы. Это позволяет добавлять организационные диаграммы в веб-проект с помощью кодирования или пользовательского интерфейса. На уровне программирования этой цели можно достичь с помощью обширного и простого в использовании API. Кроме того, вы можете дополнить свое веб-приложение редактором диаграмм DHTMLX, который позволит конечным пользователям создавать организационную диаграмму и редактировать ее на лету.
Давайте подробнее рассмотрим оба этих подхода и проанализируем их основные преимущества в построении организационных диаграмм.
Диаграмма в режиме организационной диаграммы
При использовании традиционного подхода к кодированию в диаграмме DHTMLX есть специальный режим организационной диаграммы, предназначенный для облегчения ваших усилий по кодированию. Он поставляется со встроенным алгоритмом, который автоматически упорядочивает все элементы диаграммы в иерархии родитель-потомок.
Этот режим хорошо подходит для создания организационных диаграмм, а также других древовидных диаграмм (семейных деревьев, диаграмм WBS и т. д.).
Наша библиотека диаграмм JS предоставляет множество функций для создания полнофункциональных организационных диаграмм любой сложности. Кроме того, здесь вы также можете использовать встроенные фигуры, доступные в других режимах диаграммы, и добавлять в свой проект другие типы фигур.
Простая инициализация
Часто можно услышать, что это первый шаг, который стоит. К счастью, это не относится к библиотеке диаграмм DHTMLX. Чтобы добавить организационную диаграмму в свое приложение, вам нужно выполнить всего несколько простых шагов: загрузить пакет Diagram и распаковать его в папку проекта, инициализировать организационную диаграмму, загрузить данные в диаграмму, и вот оно!
Что касается собственно инициализации, то она выполняется с помощью конструктора dhx.Diagram. Организационную диаграмму можно инициализировать в контейнере, в теле документа или в ячейке макета. Вот пример с контейнером:
const diagram = new dhx.Diagram("diagram_container", {
type: "org"
});
Более подробно о процессе инициализации вы можете узнать в этом разделе нашей документации.
Быстрая настройка для всех карт
Еще одна вещь, которая вам обязательно понравится в DHTMLX Diagram, — это его гибкая конфигурация. Наш компонент JavaScript предлагает большое количество параметров конфигурации. Но мы хотели бы обратить особое внимание на свойство defaults, которое поможет вам сэкономить время на подготовке наборов данных для сложных организационных диаграмм и при этом написать меньше кода. Дело в том, что это свойство позволяет установить конфигурацию по умолчанию сразу для всех карточек вашего графика.
const defaults = {
height: 115
width: 330
};
Посетите эту страницу, чтобы ознакомиться с другими параметрами конфигурации и посмотреть, как они применяются на простых примерах.
Пользовательские элементы организационной диаграммы
Мы прекрасно понимаем, что удовлетворить ожидания конечных пользователей практически невозможно без индивидуального подхода к их потребностям. Чтобы дать вам больше возможностей для маневра в этом направлении, мы сделали компонент Diagram JS максимально настраиваемым. Таким образом, вы можете создавать собственные элементы организационной схемы, соответствующие любым требованиям проекта.
С помощью метода addShape можно быстро создать пользовательскую карточку и определить для нее уникальный шаблон, в котором будут указаны все необходимые атрибуты. Этот метод также позволяет добавить конфигурацию карт по умолчанию.
Но прежде чем приступить к созданию пользовательских фигур, необходимо настроить для них HTML-шаблон:
const template = ({ photo, name, post, phone, mail }) => (`
<div class=”dhx-diagram-demo_personal-card”>
…
</div>
Затем вы можете приступить к добавлению пользовательских фигур:
diagram.addShape("template", {
template: template
defaults: {
name: "Name and First name",
post: "Position held",
phone: "(405) 000-00-00",
mail: "[email protected]",
photo: "../common/big_img/big-avatar-1.jpg",
height: 115, width: 330
},
});
По умолчанию все карточки организационной схемы связаны друг с другом в иерархическом порядке с помощью основных «локтевых» линий. Но вы можете изменить их внешний вид, применив необходимые свойства конфигурации к объекту line, как в следующем примере:
const data = [
{
id: "1-2",
from: "1",
to: "2",
type: "line",
strokeType: "dash",
stroke: "red",
},
];
Формы помощника и партнера
Если вы столкнулись с проблемой представления помощников/секретарей или работников одного уровня в структуре компании, решение есть. Библиотека диаграмм DHTMLX дает вам возможность дополнить любой родительский узел на организационной диаграмме карточками помощника и партнера. Второй вариант также очень полезен для построения генеалогических деревьев. Помощники и партнеры добавляются на график путем подготовки набора данных с использованием одноименных свойств:
const data = [
{
"id": "1",
"text": "Chairman & CEO",
"title": "Henry Bennett",
"img": "../avatar-01.png"
},
// partner for 1
{
"id": "1.1",
"text": "CTO",
"title": "Greg Mash",
"img": "../avatar-17.jpg",
"partner": true,
"parent": "1",
},
// partner for 1
{
"id": "1.2",
"text": "CFO",
"title": "Olga Dahixi",
"img": "../avatar-23.jpg",
"partner": true,
"parent": "1",
},
// assistant for 1
{
"id": "1.3",
"text": "Assistant",
"title": "Mike Freebel",
"img": "../avatar-30.jpg",
"assistant": true,
"parent": "1",
},
];
Функции для удобной работы с большими организационными диаграммами
Когда ваша организационная структура начинает усложняться, необходимо подумать о добавлении некоторых функций, которые помогут конечным пользователям удобно работать с большими структурами. Diagram API включает в себя набор методов и свойств, предназначенных для включения таких функций, как:
- расширение/свертывание ветвей,
- фильтрация элементов организационной диаграммы,
- добавление строки поиска,
- компактное отображение графика в вертикальном режиме,
- прокрутка до определенной карты,
- увеличение/уменьшение структуры организационной диаграммы.
Все эти и другие описанные выше возможности хорошо описаны в наших гайдах, так что не должно возникнуть сложностей с их внедрением в ваше приложение. Кроме того, вы также можете прочитать эту статью, чтобы получить полное представление о том, как подход к программированию работает на практике.
Преимущества использования редактора диаграмм DHTMLX
Редактор диаграмм DHTMLX — это специально разработанный инструмент, предоставляемый вместе с нашей библиотекой диаграмм, который предлагает способ представления различных типов диаграмм на веб-странице без использования кода. Как и диаграмма DHTMLX, она предлагает три различных режима работы — по умолчанию, организационную диаграмму и интеллект-карту.
При использовании режима организационной диаграммы конечные пользователи могут отображать организационные диаграммы и другие древовидные диаграммы с помощью интуитивно понятного интерфейса, не беспокоясь о структурной точности. Интерфейс редактора в режиме организационной диаграммы состоит из трех основных частей: панели инструментов, области сетки и правой панели. Все, что нужно для построения организационной диаграммы, — это выбрать корневую форму и начать добавлять дочерние элементы в нужном порядке.
Звучит многообещающе, правда? Но в интерфейсе редактора есть много других функциональных преимуществ, которые помогут вам максимально эффективно использовать этот инструмент. Давайте рассмотрим их прямо сейчас.
Многофункциональная панель инструментов
Панель инструментов — это надежный инструмент, который обеспечивает полный контроль над процессом редактирования и приходит на помощь, когда что-то идет не так. Расположенный в верхней части интерфейса, он включает в себя набор элементов управления для выполнения различных полезных операций в режиме оргструктуры редактора.
Например, все изменения редактирования могут быть мгновенно применены к организационной диаграмме или удалены с помощью кнопок «Применить все» и «Сбросить изменения» соответственно. Кнопки отмены и повтора помогут справиться с последними изменениями. Функция масштабирования служит для эффективной работы с большими графиками. Также есть возможность скрыть правую панель специальным элементом управления (editManager) и сосредоточиться на графике.
Многочисленные варианты взаимодействия с картами
Хотя карточки в организационной диаграмме автоматически располагаются в области сетки, не проблема переместить всю диаграмму или любую карточку в нужном направлении с помощью перетаскивания. Но что еще более интересно, вы можете мгновенно изменить структуру диаграммы вручную, перетащив один родительский узел (вместе с его дочерними элементами) на другой. Такая необходимость может возникнуть в случае корпоративной реструктуризации.
При нажатии на карточку в области сетки вы получаете доступ к дополнительным возможностям взаимодействия с ней через личную панель инструментов. Список опций включает следующее:
- добавление новой карты,
- добавление помощников и партнеров,
- выравнивание дочерних элементов данной карты по вертикали или горизонтали,
- удаление выбранной карты (кроме корневой) вместе с ее дочерними элементами.
На личных панелях карточек помощника и партнера есть только опция «удалить», которая удаляет выбранную карточку.
Все карты также снабжены ручками для изменения их размера. Любая карта с дочерними элементами является сворачиваемой/расширяемой. Функция мультивыбора позволяет выделить несколько карточек мышью или комбинацией горячих клавиш (Shift+Левый клик) и одновременно выполнять над ними основные операции (переместить, скопировать, вставить, удалить). Редактор также поддерживает ряд горячих клавиш для управления оргструктурой с помощью клавиатуры.
Редактирование карт
После завершения структуры вашей организационной схемы вы можете приступить к индивидуальному изменению карточек и заполнению их соответствующим содержанием. Здесь вступает в действие правая панель редактора.
Редактируемые параметры в правой панели появляются на экране после нажатия на нужную карту. Правая панель предлагает набор редактируемых атрибутов карты, таких как шаг сетки, положение и размер карты, цвет заголовка карты и персональные данные сотрудника (ФИО, должность, фото). Кроме того, предопределенные формы организационных диаграмм имеют встроенный редактор, который позволяет изменять текстовое содержимое прямо в области сетки. Пользователям достаточно дважды щелкнуть нужный атрибут карты и обновить его значение.
Настройка редактора
Подобно библиотеке диаграмм DHTMLX, редактор также имеет мощные возможности настройки. В первую очередь это связано с возможностью добавления в редактор пользовательских карт. Такие новые карточки могут содержать как атрибуты по умолчанию, так и уникальные атрибуты, но это не ограничивает возможности пользователя изменять любой из них при необходимости. Все настраиваемые параметры можно легко добавить на правую панель с помощью параметра properties метода addShape, чтобы ваша организационная диаграмма была полностью редактируемой.
Существует также возможность изменить способ взаимодействия с картой в области сетки, настроив ее личную панель инструментов. Меняйте расположение элементов управления на панели инструментов, убирайте ненужные функции и добавляйте пользовательские — все возможности в вашем распоряжении. Вы также можете установить пользовательский стиль для родительского узла, на который перетаскивается какой-либо другой родительский узел с его дочерними элементами.
Панель инструментов редактора можно настроить в соответствии с конкретными требованиями, чтобы облегчить более эффективное управление усилиями по визуализации данных.
Как видите, в редакторе диаграмм DHTMLX есть все необходимое для создания пользовательских организационных диаграмм и других иерархических структур.
Заключение
Диаграмма DHTMLX позволяет объединить два эффективных подхода для визуализации структуры компании с минимальными затратами времени и усилий. Вы можете либо создать и настроить организационную диаграмму JavaScript с помощью богатого API, либо встроить многофункциональный редактор организационных диаграмм, чтобы пользователи могли создавать организационные диаграммы на основе DHTMLX и другие иерархические структуры с помощью удобного интерфейса.
Есть сомнения по этому поводу? Скачайте бесплатную 30-дневную пробную версию и убедитесь в этом сами.
Эта статья изначально была опубликована в блоге DHTMLX.
