Форматирование виджетов "График", "Столбчатая диаграмма", "Линейчатая диаграмма"
- Эдуард Столяр
Форматирование может применяться в следующих элементах виджета:
Ось 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- название серии;
Примеры использования
Настройка подписи в зависимости от величины значения
Допустим, вы настраиваете столбчатую диаграмму, которая показывает количество продаж. Если значение меньше определенного порога (предположим, 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) в соответствующих разделах.
Выравнивание подписей по центру
Для выравнивания надписей по центру в столбцах используется следующая команда:
'<div style="text-align:center">$(@value.y)</div>'
Где @value.y - значение по оси Y.
Внимание! Для того, чтобы выполнилась данная команда, необходимо включить режим работы с HTML. Для этого выполните следующую команду в коде виджета:
w.plotOptions.series.dataLabels.useHTML = true
Данный метод выравнивания работает, если в настройке столбцов включено накопление.
На этой странице
Время чтения: 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(любой пробельный символ: пробел, табуляция, перенос строки).
Смотрите также