Для настройки внешнего вида элементов, в зависимости от условия или форматирования отдельных элементов виджетов, используется продвинутое форматирование свойств виджетов. Данная настройка включается соответствующими настройками на вкладке визуальных свойств каждого виджета.
Например:
...
С помощью форматирования можно получить виджеты удовлетворяющие особым визуальным аспектам.
| Информация |
|---|
По умолчанию Highcharts рисует в SVG. |
...
1. Тернарные операторы
...
Помимо стандартных визуальных настроек виджетов доступно продвинутое форматирование свойств виджетов. Данный вид форматирования позволяет более тонко настроить визуализацию данных в соответствии с вашими потребностями. Например, вы можете выделить другим цветом значения таблицы, которые не укладываются в определенный диапазон, изменить подписи на осях графиков, изменить цвет подписей на точках, и многое другое.
В зависимости от виджета, который вы используете, продвинутое форматирование производится либо в текстовых полях свойств виджета, либо в поле форматирования. Например, для виджета Текст это поле Текст в настройках текста, а для виджета График это поле Форматирование в соответствующих свойствах виджета:
Виджет Текст:
Виджет График:
Для форматирования используются различные команды. Поддерживается синтаксис языков HTML, JavaScript, а также используются зарезервированные команды:
| Раскрыть | ||
|---|---|---|
| ||
|
...
|
Зарезервированные
...
функции, набор которых определен для каждого виджета:
...
...
...
...
...
...
...
...
...
...
...
...
4. Стандартные функции js
| Информация |
|---|
Дополнительно примеры использования см. в разделе “Примеры использования“. |
...
Для задания цвета в форматерах существует несколько способов:
...
HTML имя цвета
...
rgba
HEX
...
Стандартные функции JavaScript
| Примечание |
|---|
Перед форматированием свойств виджета необходимо привязать его к данным, например, к базе данных ViQube. |
Примеры
Пример 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)
| Информация |
|---|
Дополнительные примеры форматирования см. в разделе Примеры форматирования. |