Сравнение страниц

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

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

Виджет График:

Image Removed

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

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

Раскрыть

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

Математические операции:
- @value * 1000
- (@value +100)/100
- и т.д.
Логические операции:
- @row[0] - @row[1] > 100 ? 'blue':'red'
- @level == 0 ? @value + ' год' : @level==1? 'месяц ' + @value : ''
- @value == 'Стоимость реализации товара' ? @value + " руб." : ""
- @columnPath == "Январь" ? '#03a9e3' : ""
- и т.д.
Дополнение текста:
- @value + " руб."
- @value == "Ж" ? @value = "Женщины": @value == "М" ? @value = "Мужчины": @value
- и т.д.
Форматирование стиля текста:
- '<div style="color: red">' + @value + '</div>'
- '<div style="color:' + @point.color + '"> '+ @series.name+ '</div'
- и т.д.

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

Текст

- Фильтр
Функции visApi()
Стандартные функции JavaScript

Примечание
Перед форматированием свойств виджета необходимо привязать его к данным

, например, к базе данных ViQubeImage Removed
Image Added
Пример 2
Виджет
Гистограмма
Столбчатая диаграмма. Форматирование подписей столбцов с помощью следующей команды:
'<div style="color:' + @point.color + '"> '+ @series.name+ '</div>'
До форматирования:
Image Removed
Image Added
После форматирования:
Image Removed
Image Added
Пример 3
Виджет
Гистограмма
Столбчатая диаграмма. Выравнивание надписей по центру в столбцах. Используется следующая команда:
'<div style="text-align:center">$(@value.y)</div>'
Image Removed
Image Added
Внимание! Для того, чтобы выполнилась данная команда, необходимо включить режим работы с HTML. Для этого выполните следующую команду в коде виджета:
w.plotOptions.series.dataLabels.useHTML = true
Image Removed
Image Added
Пример 4
Виджет Сводная таблица. Форматирование цвета текста и фона ячеек. Возможно использование различных цветовых форматов:
HTML имя цвета (например, red)
RGBA (например, rgba(225,0,0,225))
HEX (например, #ff0000)
Image Removed
Image Added
Дополнительные примеры форматирования см. в разделе Примеры форматирования.
🕑 Время чтения: 3 мин.
Нужна дополнительная помощь?
Свяжитесь с технической поддержкой.

Сравнение версий

Старая версия 2

Новая версия Текущий

Ключ

Примеры