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

Owned by Эдуард Столяр
Last updated: янв. 17, 2024
3 min read

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

  • Ось X

  • Ось Y

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

  • Подписи (Подписи точек/столбцов)

  • Подсказка

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

  • @value - название (значение, если числа) точки

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

  • @value.y - значение точки по оси Y

  • @value.x - название точки по оси X

  • @point.name - название точки на координатном пересечении

  • @point.color - цвет серии

  • @series.name - название серии

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

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

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

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

Где

  • @series.name == "Прибыль" - условие, при котором названием серии является Прибыль;

  • @value.y - значение по оси Y;

  • + " %" - добавленный текст.

    graph1.png

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

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

  • Ось X

  • Ось Y

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

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

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

Где

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

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

y-values(1).png

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

Выравнивание подписей по центру

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

'<div style="text-align:center">$(@value.y)</div>'

Где @value.y - значение по оси Y.

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

w.plotOptions.series.dataLabels.useHTML = true

Данный метод выравнивания работает, если в настройке столбцов включено накопление.

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

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

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

Где

  • @value - зарезервированная функция;

  • getDrillLevel - функция VisApi(), определяющая уровень детализации;

  • "1b21e42de7954010adf2bb71c6608764" - ID виджета.

 

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

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

Вы можете изменить формат дат, отображаемых в виджете, с помощью команд JavaScript. Например, если при визуализации данных даты отображаются в формате mm/dd/yyyy hh:mm:ss, а вы хотели бы, чтобы они показывались в формате dd.mm.yyyy, необходимо сделать следующее:

  1. В Desktop Designer выберите необходимый виджет и перейдите на ось, где отображаются даты (например, X).

  2. В свойствах оси перейдите в поле Форматирование и введите следующую команду:
    @value.substring(3,5) + "." + @value.substring(0,2) + "." + @value.substring(6,10)
    Формат отображаемых дат изменится:

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

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