Перейти к основному содержимому

Столбцы

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

Горизонтальный вариант отображения:

Столбики горизонтальные

Вертикальный вариант отображения:

Столбики

Блоки конструктора

Логика работы конструктора для данного дэша представлена в расширенном руководстве пользователя.

JSON-конфигурация

Ключи title (глава 1.2.1), description (глава 1.2.2), frame (глава 1.2.3), bgImage работают аналогично описанию в руководстве по конфигурации дэшлетов в соответствующих блоках.

Поле view_class для горизонтального отображения имеет значение bar, для вертикального отображения column.

Далее представлена таблица ключей, поддерживаемых дэшем “Столбики”.

dataSource

Опции koob, dimensions, measures, limit, sortBy, xAxis, yAxis и filters из секции dataSource подробно описаны в руководстве по конфигурации дэшлетов (глава 1.2.4).

Название ключаВозможные значенияОписание
titleСтрока, LPE-выражениеУказание заголовка для показателя, отображаемого в легенде и всплывающей подсказке (если редактируется показатель, лежащий на оси Y) либо изменение подписи показателя на оси (если редактируется показатель, лежащий на оси Х).
colorСтрокаУказание цвета для показателя. Работает только для показателей, лежащих на оси Y. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.).
formatСтрокаОтображение значения в тултипе и в подписях на графике в соответствии с указанным форматом. Указывается для фактов либо для размерностей, лежащих на оси Y. Все варианты форматов описаны в руководстве по конфигурации дэшлетов.
vizelTypeСтрокаУказывается, если необходимо одну из линейных диаграмм отобразить другим типом: line - линии, scatter - точки, spline - сплайн.
strokeStyleСтрокаРаботает только, если для показателя указан vizelType: ‘line’ / ‘spline’ и показатель отображен на оси Y (Цвета). Изменение варианта отображения линии. Все варианты описаны в руководстве по конфигурации дэшлетов.

Правила указания данных стилей представлены в руководстве по конфигурации дэшлетов.

Для данного дэша также можно указывать опцию DisableLegend внутри блока styles для показателей, лежащих на оси “Цвета”. При включении опции по умолчанию данный показатель будет отображаться после нажатия на легенду.

Пример указания:

"dataSource":{
"koob":"ch.max_example",
"style":{
"measures":{
"sum_v_main":{
"options":[
"DisableLegend",
],
},
},
},
}

Для указания цвета для факта в зависимости от другого факта необходимо использовать опцию ColorX и указать LPE-выражение, по которому столбцы будут окрашиваться. Ниже представлен пример конфигурации:

    style: {
measures: {
max_v_main: {
options: [
'ColorX',
],
color: "lpe:if(sum_v_main < 15000, 'green', 'red')",
},
},
},

Ниже представлен вариант отображения столбцов после указания вышепредставленных стилей:

Раскаска факта в зависимости от значений другого факта

display

Название ключаВозможные значенияОписание
limitЧислоОбрезает ось-X на заданное значение.
rangeМассив чиселОтображение определенного диапазона значений по оси Y. Пример: range: [-100, 100] - в данном примере ось Y будет отображена от -100 до 100.
tooltipстрока либо JSON-конфигурация дэшаОтображение кастомного тултипа (с дэшем внутри, отображение LaTex-формулы, HTML). Подробнее в руководстве по конфигурации дэшлетов (1.2.6.2).
stoplightСтрока либо объектЦветовая разбивка диаграммы на зоны. Описано в руководстве по конфигурации дэшлетов (1.2.6.1).
bgColorСтрокаУказание цвета фона дэша. Цвет можно указать в формате #HEX, RGB, RGBA либо ключевым словом (red, blue, green и т.д.).
borderRadiusЧислоCкругление столбиков.
headerStyleобъектИспользуется для указания стилей заголовка дэша.
rotateXLabelЧислоУгол поворота заголовка на оси Х.
rotateYLabelЧислоУгол поворота заголовка на оси Y.
xAxisLabelLimitЧислоРазмер области заголовка на оси Х (px).

echart

Дэш “Столбики” можно стилизовать, используя общие опции для графиков echart и конфигурацию для type: bar. Ознакомиться с полным пакетом ключей для дэша “Столбики” вы можете здесь. Ниже будут представлены примеры использования объекта echart:

  1. Указание ширины столбцов:
echart: {
barWidth: 50,
},
  1. Указание цвета и размера подписей для оси:
echart: {
xAxis: {
axisLabel: {
textStyle: {
color: 'gold',
fontSize: 42,
},
},
},
yAxis: {
axisLabel: {
textStyle: {
color: 'gold',
fontSize: 42,
},
},
},
},
  1. Указание цвета лэйбла на графике:
echart: {
series: {
label: {
color: 'red',
position: 'inside',
},
},
},

options

Описывает различные дополнительные настройки при отображении деша.

Пример указания:

"options": ["DisplayAllBadges","HideLegend"].
Название ключаОписание
FixedПри включенной опции дэш закреплен на экране при скроллировании.
DisplayAllBadgesПоказать все подписи на графиках без учета пересечений значений.
DisplayAllVeryBadgesПоказать все подписи принудительно.
!TopBarMenuСкрыть меню дэша.
!TopBarСкрыть заголовок дэша.
!DisplayLegendСкрыть легенду на графике.
!DisplayAxisYMarksСкрыть ось Y у дэша.
!DisplayAxisXMarksСкрыть ось Х у дэша.
TooltipXAxisTitleОтображение полного наименования показателя размерности во всплывающей подсказке (тултипе).
!DisplayAxisСокрытие сетки и осей у двумерных дэшей.
!DisplaySplitLinesСокрытие разделительных линий у двумерных дэшей.
!DisplayTicksСокрытие рисок/тиков осей у двумерных дэшей.
ModalDrilldownПодключение старого варианта иерархии для дэша (Модальное окно с горизонтальными столбцами).
!ExpandedСокрытие возможности разворачивания дэша на весь экран.
HiddenСокрытие дэша.
TransparentФон дэша соответствует фону подложки дэшборда.
DisplayDataZoomОтображение зума по данным.
YLogAxisОтображение оси Y как логарифмической.
LinesWithoutDotsСкрытие точек для показателей, отображаемых как линии / сплайны.

onClickDataPoint

Поле onClickDataPoint описывает поведение клиентской части LuxmsBI при нажатии на один из указанных показателей в LPE-выражении, используемом для описания поведения.

Ниже в таблице приведены доступные функции для данного дэша. Описание работы с ними представлено в одноименном разделе руководства по конфигурации дэшлетов (глава 1.2.12)

Название функцииОписание
setKoobFiltersФильтрация дэшей по значению размерности при нажатии на данное значение размерности.
navigateПереключение на указанный в выражении дэшборд/атлас.
openModalПри нажатии на точку (сегмент) дэша откроется модальное окно с дэшем, id которого указано в конфигурационном файле.
navigateUrlИспользуется для перехода на внешний источник с подстановкой значения.
menuItemиспользуется для совместного использования hierarchy и функций onClickDataPoint.

Книга рецептов

Реализация опорной линии для дэша типа “Столбики”

В системе Luxms BI присутствует возможность комбинирования вариантов отображения на одном дэше. Это может быть полезным при отображении опорной линии или плана. Ниже представлен пример отображения линии со столбцами.

  1. Отложите дэш “Столбцы” на дэшборд, выберите два факта и размерность:
Настройка дэша “Столбцы”
  1. Перейдите в режим редактирования стилей дэша и укажите для одного из фактов тип отображения “Линии” и нажать “ОК”:
Смена типа отображения графика

Используя вышеописанный алгоритм, можно построить как статичную линию (в поле выражения можно указать avg(число):con и выбрать вариант отображения “Линии”) или динамическую. Также, используя LPE-выражение и опцию ColorX можно раскрасить столбцы в зависимости от того, выше или ниже динамическое значение:

Покраска столбцов в зависимости от динамической оси

Ниже представлен пример конфигурации дэша, представленного на изображении выше:

{
frame: {
h: 6,
w: 10,
x: 0,
y: 0,
},
dataSource: {
koob: 'ch.max_example',
style: {
measures: {
max_v_main: {
color: 'lpe: if(max_v_main>count_v_main, "red", "green")',
options: [
'ColorX',
],
},
count_v_main: {
vizelType: 'line',
},
},
},
xAxis: 'category',
yAxis: 'measures',
measures: [
'max(v_main):max_v_main',
'count(v_main):count_v_main',
],
dimensions: [
'category',
],
},
view_class: '1II.column',
title: '',
}

Для скрытия точек у опорной линии, для конкретного показателя есть возможность указать опцию LinesWithoutDots, которая скрывает точки у линии:

Скрытые точки у линии

Ниже представлен пример с учетом опций для опорной линии:

{
frame: {
h: 6,
w: 10,
x: 0,
y: 0,
},
dataSource: {
koob: 'ch.max_example',
style: {
measures: {
max_v_main: {
color: 'lpe: if(max_v_main>count_v_main, "red", "green")',
options: [
'ColorX',
],
},
count_v_main: {
title: 'Цель',
options: [
'!DisplayAllBadges',
'LinesWithoutDots',
],
vizelType: 'line',
strokeStyle: 'Dash',
},
},
},
xAxis: 'category',
yAxis: 'measures',
measures: [
'max(v_main):max_v_main',
'count(v_main):count_v_main',
],
dimensions: [
'category',
],
},
view_class: '1II.column',
title: '',
}

Реализация нескольких осей для столбчатой диаграммы

В случае необходимости отображения нескольких осей на дэше, необходимо для каждого из фактов указать формат с уникальным суффиксом. Ниже представлен пример отображения дэша, в случае, когда для одного из фактов указан формат # ### руб, а для другого # ### шт:

Отображение дэша с двумя осями

Ниже представлена JSON-конфигурация вышепредставленного дэша “Столбики”:

{
dataSource: {
koob: 'ch.ch_max_example',
yAxis: 'measures',
measures: [
'sum(v_main):sum_v_main',
'max(v_main):max_v_main',
],
dimensions: [
'age',
],
xAxis: 'age',
style: {
measures: {
sum_v_main: {
title: 'Общее',
format: '# ### шт',
},
max_v_main: {
title: 'Среднее',
format: '# ### руб',
},
},
},
},
frame: {
x: 0,
y: 0,
w: 11,
h: 7,
},
view_class: '1II.column',
title: '',
}