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

Ключ

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

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

Например:

...

С помощью форматирования можно получить виджеты удовлетворяющие особым визуальным аспектам.

Информация

По умолчанию Highcharts рисует в SVG. 
Для переключение на HTML добавляем в начало кода виджета
w.plotOptions.series.dataLabels.useHTML = true
Что дает нам использовать в коде стандартные стили, например

...

:
 Image Modified


В строке форматирования возможно использовать:

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

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

  • Математические операции:

    • @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'

2. Зарезервированные функции

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

3. Функции visApi()

4. Стандартные функции js


Информация

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


Информация

Для задания цвета в форматерах существует несколько способов:

  • HTML имя цвета

    • Image Modified
  • rgba

    • Image Modified
  • HEX

    • Image Modified