Вывод данных в виде графа на сайте

Компонент основан на базе 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 у узла (если он есть). 

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.