Общие сведения

Диаграмма представляет собой визуализацию данных, где информация представляется в виде категорий (узлов), соединенных между собой линиями различной ширины (связями). Это позволяет визуализировать потоки данных (например, финансы, трафик, интенсивность работы по бизнес-процессу), показывая вклад каждого потока в общий результат.

Настройки данных

Компонент предоставляет настройки данных:

• «Категория»;
• «Показатель»;
• «Цветовая идентификация»;
• «Количество записей на странице»;
• «Фильтры».

Поле «Категория»

Колонки датасета, вынесенные в поле «Категория», формируют узлы диаграммы. В поле должно быть вынесено не менее двух колонок.

Поле «Показатель»

По значению поля формируются связи, иллюстрирующие потоки данных. На диаграмме можно задать только один показатель.

Для расчета значения показателя используется установленная для вынесенной колонки функция агрегации, условное обозначение которой (по умолчанию SUM) отображается в правом крае колонки. Подробнее о работе с функциями агрегации см. раздел Создание виджета.

—

Блок «Цветовая идентификация»

Блок заполняется, если необходимо, чтобы данные отображались на диаграмме определенными цветами, заданными на уровне датасета.

Поле «Колонка»

Содержит колонку датасета, для значений которой линии связей и отрезки узлов должны быть окрашены в определенные цвета.

Поле «Код цвета»

Содержит колонку датасета с HEX-кодами цветов для окрашивания значений на диаграмме. В поле можно вынести не более одной колонки.

Поле «Количество записей на странице»

Значение поля – число N – ограничивает количество отображаемых связей до первых N значений. Когда значение поля «0» или не указано, ограничения нет.—

Фильтры

Для работы с расширенным фильтром см. раздел Работа с расширенным фильтром.

Настройки визуализации

Компонент предоставляет настройки визуализации:

• «Условия форматирования»;
• «Вариант отображения»;
• «Значения узлов» – включает в себя:
  • «Значения на узлах»;
  • «Отображение значения»;
  • «Обрезать наименования»;
  • «Количество символов для обрезки»;
  • «Положение значения на узлах»;
  • «Тип отображаемого значения»;
• «Значения связей» – включает в себя:
  • «Значения на связях»;
  • «Отображение значения»;
  • «Обрезать наименования»;
  • «Количество символов для обрезки»;
  • «Положение значения на узлах»;;
• «Подсказка» – включает в себя:
  • «Всплывающие подсказки»;
• «График» – включает в себя:  

  • «Ширина узлов, px»;

  • «Разрешить перемещение узлов»;

  • «Скрывать пересекающиеся значения».

Блок «Условия форматирования»

Позволяет задать правила цветового оформления диаграммы. Для добавления нового правила необходимо развернуть блок «Условия форматирования» и нажать кнопку . После нажатия открывается модальное окно с настройкой правила:

Модальное окно с настройкой правила включает в себя следующие параметры:

• Цветовой градиент;
  Для настройки цветового градиента необходимо нажать на переключатель . После нажатия отображается поле типа «селект», где необходимо выбрать колонку с числовыми показателями. Снизу от поля отображается RGB-палитра, где можно настроить цвет фона. Для настройки интервала окраски необходимо вручную установить начальное и конечное значение. В левом нижнем углу модального окна располагается переключатель на трехцветный градиент . После нажатия отображается еще одна палитра и еще одно поле для более детальной настройки цветовой дифференциации. 

• Поле «Колонка»;
  Поле «Колонка» предназначено для выбора колонки данных, на которую устанавливается условие. Для выбора нужной колонки необходимо нажать на кнопку, которая располагается в правой части поля. После нажатия открывается список имеющихся колонок. Необходимо выбрать нужную колонку. Данное поле обязательно для заполнения.
  
  
• Поле «Условие»;
  Поле «Условие» предназначено для установления условия. Для выбора условия необходимо нажать на кнопку, которая располагается в правой части поля. После нажатия открывается список условий. Необходимо выбрать нужное условие, которое будет применяться по выбранной колонке на предыдущем шаге. Данное поле обязательно для заполнения.
  
  
• Поле «Значение»;
  Поле «Значение» предназначено для указания значения. Данное поле обязательно для заполнения.
  
  
• Кнопка «Добавить колонку»;
  После нажатия на кнопку добавится блок для выбора колонки и указания условия для этой колонки. Данный блок можно добавлять неограниченное количество раз.
  
  
• Настройка цвета значений.
  Для настройки цвета фона необходимо нажать на . После нажатия отображается RGB-палитра, где можно указать необходимый цвет значений.
  
  

После того как были выполнены все настройки, необходимо нажать на кнопку "Применить". Условное форматирование колонки сохранится.

Для сброса настроек необходимо нажать на кнопку "Отменить". 

После сохранения настроек условного форматирования по колонке в блоке «Условия форматирования» добавляется новое правило:

Для редактирования уже созданного правила необходимо нажать на иконку . После внесения всех изменений необходимо нажать кнопку «Применить».
Для удаления уже созданного правила необходимо нажать на иконку .

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

Поле «Вариант отображения»

Вариант отображения определяет вид представления данных на диаграмме. Предоставляемые варианты:

• вертикальное;
• горизонтальное.

Блок «Значения узлов»

Блок служит для настройки отображения значений на узлах диаграммы.

—

Блок включает в себя следующие поля и параметры.

• Значения на узлах – отображение значений на узлах диаграммы.
• Отображение значения – состав отображаемого значения. Варианты:
  • название – отображается только значение поля «Категория»;
  • значение – отображается только значение поля «Показатель»;
  • название и значение – дополнительно к значению поля «Категория» отображается значения поля «Показатель».
• Обрезать наименования – сокращение длины значения поля «Категория» с многоточием.
• Количество символов для обрезки – количество символов значения поля «Категория» до сокращения.
• Положение значения на узлах – положение значений поля «Показатель» относительно узлов диаграммы. Варианты:
  • справа;
  • слева;
  • по центру;
  • сверху;
  • снизу.
• Тип отображаемого значения – отображение значения поля «Показатель». Варианты:
  • абсолютные значения (в цифрах);
  • относительные значения (в процентах).

Блок «Значения связей»

Блок служит для настройки отображения значений на узлах диаграммы.—

—

Блок включает в себя следующие поля и параметры.

• Значения на связях – отображение значений на связях диаграммы.
• Отображение значения – состав отображаемого значения. Варианты:
  • название – отображается только значение поля «Категория»;
  • значение – отображается только значение поля «Показатель»;
  • название и значение – дополнительно к значению поля «Категория» отображается значения поля «Показатель».
• Обрезать наименования – сокращение длины значения поля «Категория» с многоточием.
• Количество символов для обрезки – количество символов значения поля «Категория» до сокращения.
• Положение значения на связях – положение значений поля «Показатель» относительно связей диаграммы. Варианты:
  • справа;
  • слева;
  • по центру;
  • сверху;
  • снизу.

Блок «Подсказка»

Блок служит для настройки отображения всплывающих подсказок на диаграмме. Блок включает в себя параметр «Всплывающие подсказки» – отображение подсказки по наведению на связь диаграммы. В подсказке отображаются соответствующие связи значения поля «Категория» и абсолютное и относительное значение поля «Показатель».. При наведении на связь диаграммы и отображении подсказки остальные связи скрываются.

Блок «График»

Блок служит для настройки размеров и положения узлов и связей диаграммы.

 Блок включает в себя следующие поля и параметры:

• Ширина узлов, px - задает ширину узла в пикселях;
• Разрешить перемещение узлов - для более эстетичного отображения диаграммы, узлы можно перемещать. Для этого надо зажать узел левой кнопкой мыши и двигать его внутри превью виджета. Если флажок установлен, узлы также можно перемещать в режиме просмотра проекта.
• Скрывать пересекающиеся значения -  скрытие значения, если оно накладывается на соседнее.