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

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

changes.mady.by.user Юсеф Бенариеб

Сохранено

по сравнению с

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

changes.mady.by.user Эдуард Столяр

Сохранено

Ключ

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

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

Например:

Image Removed

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

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

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

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

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

В зависимости от виджета, который вы используете, продвинутое форматирование производится либо в текстовых полях свойств виджета, либо в поле форматирования. Например, для виджета Текст - это поле Текст в настройках текста, а для виджета График - это поле Форматирование в соответствующих свойствах виджета:

Виджет Текст:

Image Added

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

Image 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'

2

    • и т.д.

  • Зарезервированные

функцииВ платформе существуют зарезервированные

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

"" "" "";

  • “Круговая диаграмма“;

  • “Таблица“;

  • “Сводная таблица“;

  • "Плоская таблица";

  • “Текст“;

  • “Фильтр“.

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

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

  • HTML имя цвета
    • Image Removed
  • rgba
    • Image Removed
    • HEXImage Removed

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

    • Стандартные функции JavaScript

    Примечание

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

    Примеры

    Пример 1

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

    Image Added

    Пример 2

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

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

    Image Added

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

    Image Added

    Пример 3

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

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

    Image Added

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

    w.plotOptions.series.dataLabels.useHTML = true

    Image Added

    Пример 4

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

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

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

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

    Image Added

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