Продвинутое форматирование свойств виджетов
Помимо стандартных визуальных настроек виджетов доступно продвинутое форматирование свойств виджетов. Данный вид форматирования позволяет более тонко настроить визуализацию данных в соответствии с вашими потребностями. Например, вы можете выделить другим цветом значения таблицы, которые не укладываются в определенный диапазон, изменить подписи на осях графиков, изменить цвет подписей на точках, и многое другое.
Продвинутое форматирование производится в поле Форматирование в соответствующих свойствах виджета:
Для форматирования используются различные команды. Поддерживается синтаксис языков HTML, JavaScript, а также используются зарезервированные команды:
Зарезервированные функции, набор которых определен для каждого виджета:
Стандартные функции JavaScript
Перед форматированием свойств виджета необходимо привязать его к данным.
Примеры
Пример 1
Виджет Круговая диаграмма. Вывод итоговой суммы значений в центр круга с помощью зарезервированной команды @total
:
Пример 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)
Дополнительные примеры форматирования см. в разделе Примеры форматирования.