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

Версия Старая версия 3 Новая версия Текущий
Изменения, внесенные

Эдуард Столяр

Эдуард Столяр

Сохранено

Ключ

  • Эта строка добавлена.
  • Эта строка удалена.
  • Изменено форматирование.

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

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

formatting(1).pngImage Added

Для форматирования используются различные команды. Поддерживается синтаксис языков 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'

    • и т.д.

Примечание

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

Примеры

Пример 1

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

Image Removedcircle(1)(1).pngImage Added

Пример 2

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

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

Image Removedcolor1(1)(1).pngImage Added

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

Image Removedcolor2(1)(1)(1).pngImage Added

Пример 3

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

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

Image Removedcenter(1)(1).pngImage Added

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

w.plotOptions.series.dataLabels.useHTML = true

Image RemovedImage Added

Пример 4

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

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

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

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

Image Removedcells(1).pngImage Added

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

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

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

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