Вывод данных в виде графа на сайте
Компонент основан на базе 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 - идентификатор узла (будет использоваться в SELECT4)
- 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 из SELECT1)
- 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 у узла (если он есть).
Пример коллбека: https://pastebin.com/Dsgw8MM6
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты Работа с таблицами. Создание таблиц на сайте Работа с формами Работа с дашбордами личных кабинетов Работа с ресурсами. Управление картинками, документами на сайте Работа со статусами. Управление статусами заявок, сущностей в личных кабинетах пользователей Бизнес-процессы. Создание бизнес-процесса в личном кабинете Генерация документов Docx и Xlsx. Выгрузка Excel, Word по шаблону Работа с деревьями (иерархия). Вывод древовидных структур на сайте Работа с HTML блоками. Создание модулей верстки Внешние действия (уведомления, пуш, email, вызов API) Диаграммы и графики в личном кабинете на сайте Интерактивное дерево для отображения иерархических структур Диаграмма Ганта на сайте Доска Канбан Диаграмма Chartbar Карта с маркерами. Вывод точек на Google Maps Карточки Полоски прогресса Временная линия (timeline) для вывода событий на странице Календарь. Управление событиями в личном кабинете Вывод данных в виде графа на сайте Вывод движения заявки по статусам statusbar Терминал - рабочее пространство с окнами и вкладками Вывод точек на карте Яндекс. Интеграция с Яндекс Карты
- Возможности Falcon Space
- Подсистемы
- Дополнительные компоненты
- Интеграции
- HOWTO
- HOWTO Таблицы
- HOWTO Формы
- Работа с SQL
- HOWTO JS
- HOWTO CSS
- HOWTO Верстка
- Решение проблем
SQL-инструмент для создания личных кабинетов на сайте

Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом
Это быстрое внесение изменений
по ходу эксплуатации программы. Как создается функционал на платформе
Это простой удобный интерфейс
адаптация под мобильные устройства. Про юзабилити платформы
Веб-приложения на MS SQL. Партнерская программа для разработчиков и веб-студий
Документация по платформе
