Sankey
Обзор
Sankey - тип визуализации данных, где информация представляется в виде объектов (узлов), соединенных между собой линиями различной ширины. Sankey диаграмма обычно используется для отображения бизнес-процессов. Она отражает ключевые шаги и интенсивность протекания на каждом участке.
Настройки Sankey
Главная
Во вкладке Главная
содержатся настройки, позволяющие задать основные параметры вида Sankey.
Параметр | Описание | JSON-поле |
---|---|---|
Поле для узлов-источников | Текстовое поле, позволяющее задать имя поля, по которому будут отображаться узлы-источники. | general.fromFieldName |
Поле для узлов-приемников | Текстовое поле, позволяющее задать имя поля, по которому будут отображаться узлы-приемники. | general.toFieldName |
Поле для значения | Текстовое поле, позволяющее задать имя поля, которое определяет ширину связи между узлами. | general.valueFieldName |
Сортировка | Селектор, позволяющий выбрать тип сортировки узлов. Доступно для выбора три опции: Нет , Название , Значение | general.sortBy |
Ориентация | Имя поля, которое определяет ширину связи между узлами. | general.orientation |
Интерфейс настроек в системе Smart Monitor выглядит следующим образом:
![](/assets/images/general-settings-0884cf71ffb93342dca4c8979f505e8d.png)
Узлы
Во вкладке Узлы
расположены параметры отображения узлов.
Параметр | Описание | JSON-поле |
---|---|---|
Ширина, px | Текстовое поле, позволяющее задать значение ширины узла. | nodes.width |
Цвет контура | Селектор цвета, позволяющий выбрать цвет контура узла. Имеет смысл, когда ширина контура > 0 | nodes.stroke |
Ширина контура, px | Числовое поле для ввода, позволяющее задать ширину контура узла. | nodes.strokeWidth |
Смещение подписей, px | Числовое поле для ввода, которое позволяет задать смещение подписей узлов относительно самих узлов. | nodes.nameLabelLocationX |
Цвет подписей | Селектор цвета, позволяющий выбрать цвет подписей узлов | nodes.nameLabelFill |
Толщина шрифта | Числовое поле для ввода, позволяющее задать толщину шрифта подписей узлов. | nodes.nameLabelFontWeight |
Нажатие | Переключатель, который позволяет включить или выключить сокрытие узлов по нажатию на них. | nodes.clickable |
Перетаскивание | Переключатель, который позволяет включить или выключить перетаскивание узлов. | nodes.draggable |
Интерфейс настроек в системе Smart Monitor выглядит следующим образом:
![](/assets/images/nodes-settings-14eb84fb725ea17398db98c6e480d2b3.png)
Связи
Во вкладке Связи
расположены параметры отображения связей.
Параметр | Описание | JSON-поле |
---|---|---|
Сглаживание | Числовое поле для ввода, позволяющее задать значение сглаживания связей. | links.tension |
Дистанция | Числовое поле для ввода, позволяющее задать значение дистанции прямой части связи до излома этой связи между двумя узлами. | links.controlPointDistance |
Режим заливки | Селектор, п озволяющий выбрать один из режимов заливки. Доступно для выбора: Цвет узла-источника , Цвет узла-приемника , Однотонный цвет , Градиент | links.colorMode |
Заливка | Селектор цвета, позволяющий выбрать цвет связи. | links.fill |
Прозрачность | Числовое поле для ввода, позволяющее выбрать прозрачность связи. | links.fillOpacity |
Интерфейс настроек в системе Smart Monitor выглядит следующим образом:
![](/assets/images/links-settings-f3d35ed6b6ddab7ffe91454d2bbf7103.png)
Позиция
Во вкладке Позиция
расположены настройки отображения позиции диаграммы.
Параметр | Описание | JSON-поле |
---|---|---|
Отступ справа, px | Числовое поле для ввода, позволяющее задать отступ диаграммы справа. | position.paddingRight |
Отступ слева, px | Числовое поле для ввода, позволяющее задать отступ диаграммы слева. | position.paddingLeft |
Отступ сверху, px | Числовое поле для ввода, позволяющее задать отступ диаграммы сверху. | position.paddingTop |
Отступ снизу, px | Числовое поле для ввода, позволяющее задать отступ диаграммы снизу. | position.paddingBottom |
Выравнивание | Переключатель, позволяющий выбрать выравнивание диаграммы. Доступно для выбора: По левому краю , По правому краю , По центру , По всей ширине | position.nodeAlign |
Интерфейс настроек в системе Smart Monitor выглядит следующим образом:
![](/assets/images/position-settings-f90081359c29e927cfc05eb696ccb05e.png)
Тема
Во вкладке Тема
можно выбрать один из заготовленных вариантов цветовых схем. По умолчанию выбрана тема "Smart Monitor". Общий список тем приведен ниже:
- Smart Monitor
- Material
- Dataviz
- Kelly's
- Frozen
- Moonrise Kingdom
- Spirited Away
- Amcharts