Форматирование виджетов "График", "Столбчатая диаграмма", "Линейчатая диаграмма"

Форматирование может применяться в следующих элементах виджета:

Ось X
Ось Y
Ось Y Дополнительная
Подписи (Подписи точек/столбцов)
Подсказка

При работе с форматированием Оси X, Оси Y, Оси Y Дополнительной можно использовать следующие зарезервированные команды:

@value – выводит исходное значение (число, дата и т.д. - любой поддерживаемый тип данных). Используется без какого-либо форматирования.
@formattedValue – значение, отформатированное в соответствии с настройками, заданными в пользовательском интерфейсе. Например, если указано округление до двух знаков после запятой, то эта переменная вернёт значение в заданном формате.

При работе с форматированием подписей и подсказок можно использовать следующие зарезервированные команды:

@value.y - значение точки по оси Y;
value.formattedY – значение точки по оси Y, отформатированное через пользовательский интерфейс;
@value.x - название точки по оси X;
value.formattedX – название точки по оси X, отформатированное через пользовательский интерфейс;
@point.name - название точки на координатном пересечении;
@point.formattedName – название точки на координатном пересечении, отформатированное через пользовательский интерфейс;
@point.color - цвет серии;
@series.name - название серии;

При работе с форматированием подсказок можно также использовать массив @tooltipData, который представляет собой массив дополнительных полей, доступных для кастомизации в пользовательских форматтерах тултипов. Каждый элемент массива представляет одно поле с метаданными для отображения в подсказке:

Структура элемента массива:

Свойство	Тип	Описание

Свойство	Тип	Описание
`name`	`string`	Отображаемое название поля.
`value`	`string`	Отформатированное (готовое для вывода) значение поля.
`rawNumber`	`number`	Исходное числовое значение до какого-либо форматирования. Это "сырые" данные, предназначенные исключительно для создания пользовательского шаблона подсказки. Используется для математических вычислений, логических условий и т.д. Отличие от `value`: `value`: `"1 250 500 руб"` (отформатировано для отображения); `rawNumber`: `1250500` (число для вычислений).
`calculatedPercent`	`number`	Процентное соотношение значения к общей сумме по серии данных. Рассчитывается автоматически и доступно только для числовых полей.

Особенности:

@tooltipData всегда является массивом (возможен пустой массив []).
Свойства rawNumber и calculatedPercent присутствуют только для числовых полей.
calculatedPercent вычисляется автоматически на основе суммы значений в рамках текущей серии данных.

Примеры использования массива см. ниже.

Примеры использования

Настройка подписи в зависимости от величины значения

Допустим, вы настраиваете столбчатую диаграмму, которая показывает количество продаж. Если значение меньше определенного порога (предположим, 10 000), вам нужны точные цифры без округления, поскольку важно видеть детализированные данные. Для этого будет использоваться переменная @value.y, возвращающая исходные данные. Но если значение превышает этот порог, вы хотите видеть числа округленными и с сокращением «тыс.», поскольку для таких значений точность менее критична. Здесь поможет переменная @value.formattedY, возвращающая значения в формате, настроенном через пользовательский интерфейс.

Чтобы выполнить такие настройки подписи, введите следующее выражение в поле Форматирование подписей точек/столбцов раздела Подписи:

@value.y < 10000 ? @value.y.toString() : @value.formattedY

где

@value.y < 10000 – проверяет, меньше ли значение 10 000.
@value.y.toString() – возвращает исходное число (без форматирования) в виде строки.
@value.FormattedY — возвращает значение с форматированием из UI (в нашем случае округленное и с текстом тыс):

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

Форматирование подписи в зависимости от серии

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

@series.name == "Прибыль" ? @value.y + " %" : @value.y

где

@series.name == "Прибыль" - условие, при котором названием серии является Прибыль;
@value.y - значение по оси Y;
+ " %" - добавленный текст.

В данном примере @value.y возвращает исходное выражение, игнорируя настройки форматирования, выполненные через интерфейс.

Настройка подписей осей

Для изменения надписей осей необходимо в свойствах осей ввести соответствующую команду в поле Форматирование. Данное поле доступно для следующих элементов:

Ось X
Ось Y
Ось Y Дополнительная

Например, для изменения надписей по оси Y существующего графика мы выполним следующую команду:

@value/1000 +' млн. руб'

Где

@value/1000 - значение оси, деленное на 1000;

+' млн. руб' - добавленный текст.

Аналогичным образом можно изменить надписи для других осей (Х, Y) в соответствующих разделах.

На этой странице

1 Примеры использования

Время чтения: 3 мин.

Нужна дополнительная помощь?

Свяжитесь с технической поддержкой.

Подписи на разных уровнях Drill Down

Вы можете добавлять подписи на разных уровнях углубления в данные. В нашем примере мы добавим сокращение г. к цифровому обозначению года и слово квартал к цифровому обозначению квартала. Для этого мы выполним следующую команду:

@value + (visApi().getDrillLevel("1b21e42de7954010adf2bb71c6608764") == 0 ? "г." : (visApi().getDrillLevel("1b21e42de7954010adf2bb71c6608764") == 1 ? " квартал" : ""))

Где

@value - зарезервированная функция;
getDrillLevel - функция VisApi(), определяющая уровень детализации;
"1b21e42de7954010adf2bb71c6608764" - ID виджета.

Для получения ID виджета, выберите виджет и перейдите в раздел Общие настроек виджета:

Изменение формата даты в виджете

Дата всегда передаётся в любую переменную (например, @value или @formattedValue) в отформатированном виде. Даже если вы не настраивали формат вручную, система использует значение по умолчанию. Поэтому, если вам необходимо изменить формат дат, проще всего сделать это через пользовательский интерфейс:

Откройте дашборд, нажмите напротив названия столбца с датами, для которого вы хотите настроить формат дат, и выберите % Формат значений:
В открывшейся панели активируйте тумблер Формат даты и выберите требуемый формат из выпадающего меню:

Изменения применяются мгновенно:

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

Перейдите в панель Данные, нажмите напротив требуемого столбца с датами и выберите % Формат значений в открывшемся меню:
Укажите нужный формат в выпадающем меню:

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

Буквы (латиница):
- Y, M, D, d, H, h, m, S, s, T, t, A, a, Z, z
Специальные символы:
- : (двоеточие);
- - (дефис);
- . (точка);
- [ и ] (квадратные скобки);
- / (косая черта);
- \s (любой пробельный символ: пробел, табуляция, перенос строки).

Примеры использования массива @tooltipData

Базовый вывод всех добавленных полей (вывод всех доступных дополнительных данных для быстрого ознакомления с ключевыми показателями):
@tooltipData.map(item => item.name + ": " + item.value).join("<br>")
Вывод с процентным соотношением (отображение не только абсолютного значения, но и относительной доли от этой категории в общем объеме по серии):
@tooltipData.map(item => { const percent = item.calculatedPercent != null ? ` (${item.calculatedPercent.toFixed(1)}%)` : ''; return item.name + ": " + item.value + percent; }).join("<br>")
Исходное числовое значение поля (до форматирования). Используется для математических вычислений, логических условий и т.д. (только для числовых полей).
@tooltipData.filter(item => item.rawNumber != null) .map(item => item.name + ": " + item.value + " (raw: " + item.rawNumber + ")") .join("<br>")
Табличное представление (представление данных в структурированном табличном виде. Повышает читаемость при большом количестве полей и создает визуально формализованный отчет прямо в тултипе):
"<table><tr><th>Показатель</th><th>Значение</th></tr>" + @tooltipData.map(item => `<tr><td>${item.name}</td><td>${item.value}</td></tr>` ).join("") + "</table>"

Смотрите также

Визуальные настройки виджетов