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

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

Продвинутое форматирование производится в поле Форматирование в соответствующих свойствах виджета:

Open

Для форматирования используются различные команды. Поддерживается синтаксис языков HTML, JavaScript, а также используются зарезервированные команды:

• Тернарные операторы

• Зарезервированные функции, набор которых определен для каждого виджета:

  • График, Гистограмма, Линейчатая диаграмма

  • Круговая диаграмма

  • Таблица

  • Сводная таблица

  • Плоская таблица

  • Фильтр

• Функции visApi()

• Стандартные функции JavaScript

Примеры

Пример 1

Виджет Круговая диаграмма. Вывод итоговой суммы значений в центр круга с помощью зарезервированной команды @total :

Open

Пример 2

Виджет Гистограмма. Форматирование подписей столбцов с помощью следующей команды:
'<div style="color:' + @point.color + '"> '+ @series.name+ '</div>'

До форматирования:

После форматирования:

Пример 3

Виджет Гистограмма. Выравнивание надписей по центру в столбцах. Используется следующая команда:

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

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

w.plotOptions.series.dataLabels.useHTML = true

Пример 4

Виджет Сводная таблица. Форматирование цвета текста и фона ячеек. Возможно использование различных цветовых форматов:

• HTML имя цвета (например, red)

• RGBA (например, rgba(225,0,0,225))

• HEX (например, #ff0000)

Дополнительные примеры форматирования см. в разделе Примеры форматирования.

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

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

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