Код обработки довольно лаконичен.
Узлы и ребра графа задаются в структурах, которые методами 1С сериализуются в объекты JSON.
&НаСервереБезКонтекста
Функция GetJSON(Данные)
//Данные - массив структур (узлы или ребра)
ЗаписьJSON = Новый ЗаписьJSON;
ЗаписьJSON.УстановитьСтроку();
ЗаписатьJSON(ЗаписьJSON, Данные);
Возврат ЗаписьJSON.Закрыть();
КонецФункции
//...
Для Каждого Стр Из Строки Цикл
Узлы.Добавить(Новый Структура("id, label, shape, level", Стр.id, Стр.Наименование + Символы.ПС + "(index: " + Стр.id + ")", "box", Стр.Уровень()));
Если НЕ Стр.Родитель = Неопределено Тогда
Ребра.Добавить(Новый Структура("id, from, to, arrows, label", id, Стр.Родитель.id, Стр.id, "to", Строка(id)));
id = id + 1;
КонецЕсли;
ДанныеСтрок(Стр.Строки, Узлы, Ребра, id);
КонецЦикла;
//...
HTML = СтрШаблон(ТекстHTML, GetJSON(УзлыИРебра.Узлы), GetJSON(УзлыИРебра.Ребра), Скрипт());
Библиотека предоставляет возможности довольно гибкой настройки вывода узлов и ребер, а также дополнительных параметров: физики движения, перетаскивания и т.п.
Поддерживается обработка событий - щелчок, двойной щелчок, выделение и т.п. - в обработке это не реализовано, т.к., несколько выходит за рамки задачи, и чтобы не усложнять код.
Также библиотекой поддерживается импорт параметров графа в формате dot.
Документация к библиотеке и примеры доступны на официальном сайте: https://visjs.org/
Обработка тестировалась на платформе 8.3.22.2283.
Проверено на следующих конфигурациях и релизах:
- Управление торговлей, редакция 11, релизы 11.5.15.69
Вступайте в нашу телеграмм-группу Инфостарт
