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

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

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

  • Ось 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;

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

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

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

  • Ось 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

 

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

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

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

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

Где

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

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

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

 

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

Related content

Форматирование виджета "Круговая диаграмма"
Форматирование виджета "Круговая диаграмма"
Read with this
Форматирование виджетов "График", "Гистограмма", "Линейчатая диаграмма"
Форматирование виджетов "График", "Гистограмма", "Линейчатая диаграмма"
More like this
Форматирование виджетов "График", "Гистограмма", "Линейчатая диаграмма"
Форматирование виджетов "График", "Гистограмма", "Линейчатая диаграмма"
More like this
Форматирование виджетов "График", "Гистограмма", "Линейчатая диаграмма"
Форматирование виджетов "График", "Гистограмма", "Линейчатая диаграмма"
More like this
Форматирование виджетов "График", "Гистограмма", "Линейчатая диаграмма"
Форматирование виджетов "График", "Гистограмма", "Линейчатая диаграмма"
More like this
Форматирование виджетов "График", "Гистограмма", "Линейчатая диаграмма"
Форматирование виджетов "График", "Гистограмма", "Линейчатая диаграмма"
More like this