Вывод данных в виде графа на сайте
Компонент основан на базе Javascript Infovit Toolkit и входит в состав компонента Таблица (как режим отображения).
Пример работы компонента на демостенде - https://demo.web-automation.ru/list/watch/vizualizaciya-dannykh-v-vide-grafa---62
Как настроить вывод графа
В SELECT 1 таблицы прописываем узлы графа
-- SELECT 1
select 'node1' id, 'node1' name,
union
select 'node2' id, 'node2' name, '#f00' color, 'circle' type, 3 dim
union
select 'node3' id, 'node3' name, '#f00' color, 'circle' type, 3 dim
union
select 'node4' id, 'node4' name, '#f00' color, 'circle' type, 3 dim
union
select 'node5' id, 'node5' name, '#f00' color, 'circle' type, 3 dim
- id - идентификатор узла (будет использоваться в SELECT 4)
- name - наименование, которое выводится на графе
- color - цвет надписи
- type - фигура (circle, triangle, square)
- dim - размер фигуры
- tip - если указан, то будет выведено в подсказке при наведении на узел (если не задан коллбек обработки подсказки)
В SELECT 3 прописываем viewType, graphOptions
-- SELECT 3
select 'graph' viewType,
'{
"contHeight": "1000px"
}' graphOptions
В GraphOptions можно передать JS настройки компонента $jit.ForceDirected (за исключением функций).
По умолчанию там такие настройки: https://pastebin.com/zdM8U6qn (если заменяется какой-либо узел (Navigation, Node, Edge, Label), то надо прописать все его настройки - ваши настройки полностью перезатирают настройки по умолчанию).
В SELECT 4 прописываем связи между узлами:
select 'node1' nodeFrom, 'node2' nodeTo, '#00f' color
union
select 'node2' nodeFrom, 'node3' nodeTo, '#0ff' color
union
select 'node3' nodeFrom, 'node2' nodeTo, '#0f0' color
- nodeFrom, nodeTo - откуда и куда идет ребро графа (id из SELECT 1)
- color - цвет связи
Примечание:
1. Не используем paging (т.е. выводим все данные сразу). Учитывайте объем данных - не выводится слишком много узлов (ограничивайте выборку в SELECT 1), иначе это приведет к длительной обработке данных на браузере.
2. Документация по настройкам JS компонента - https://philogb.github.io/jit/static/v20/Docs/files/Core/Core-js.html
3. Вариант вывода структуры БД - https://pastebin.com/0uKZ30Mt
4. Ограничение. Компонент нестабильно работает в диалоговом окне (после скроллинга окна не работает перетаскивание узлов и подсказки)
Обработка клика на узле графа
Для этого необходимо создать JS коллбек вида as.crud2callbacks[tableCode + "_clickGraphNode"], например: https://pastebin.com/cJgQejhF
Если коллбека нет, то система ищет div с id = as-visGraphNodePanel и вставляет в него название элемента и его связи.
Вывод подсказки при наведении
Если есть коллбек вида as.crud2callbacks[tableCode + "_showGraphTip"], то работает он. Если его нет, то выводится подсказка с названием элемента и полем tip у узла (если он есть).
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты Бизнес-процессы. Создание бизнес-процесса в личном кабинете Работа с показателями. Управление метриками на сайте Создание панелей-подсказок для пользователей в личном кабинете Отображение счетчиков в личном кабинете на сайте Работа с HTML блоками. Создание модулей верстки Работа с деревьями (иерархия). Вывод древовидных структур на сайте Добавление лайков, дизлайков, рейтингов, голосования за товары в личном кабинете Интерактивное дерево для отображения иерархических структур Диаграмма Ганта на сайте Доска Канбан Диаграмма Chartbar Карта с маркерами. Вывод точек на Google Maps Карточки Полоски прогресса Временная линия (timeline) для вывода событий на странице Вывод данных в виде графа на сайте Вывод движения заявки по статусам statusbar Интерактивные диаграммы, графики
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом
Это быстрое внесение изменений
по ходу эксплуатации программы. Как создается функционал на платформе
Это простой удобный интерфейс
адаптация под мобильные устройства. Про юзабилити платформы