Форматирование виджета "Диаграмма дерева"
Форматирование может применяться в следующих элементах виджета:
Подписи значений;
Подписи категорий;
Подсказка (формат значений Настраиваемый).
При работе с форматированием подписей можно использовать следующие зарезервированные команды:
Подписи значений:
@point.value – значение точки;
@point.formattedValue – значение точки, отформатированное через пользовательский интерфейс;
@point.name – название точки;
@point.formattedName – название точки, отформатированное через пользовательский интерфейс;
@point.color – цвет точки.
Подписи категорий:
@point.value - значение категории;
@point.formattedValue – значение категории, отформатированное через пользовательский интерфейс;
@point.name - название категории;
@point.formattedName – название категории, отформатированное через пользовательский интерфейс;
@point.color - цвет категории.
При работе с форматированием подсказок можно также использовать массив @tooltipData, который представляет собой массив дополнительных полей, доступных для кастомизации в пользовательских форматтерах тултипов. Каждый элемент массива представляет одно поле с метаданными для отображения в подсказке:
Структура элемента массива:
Свойство | Тип | Описание |
|---|---|---|
|
| Отображаемое название поля. |
|
| Отформатированное (готовое для вывода) значение поля. |
|
| Исходное числовое значение до какого-либо форматирования. Это "сырые" данные, предназначенные исключительно для создания пользовательского шаблона подсказки. Используется для математических вычислений, логических условий и т.д. Отличие от
|
|
| Процентное соотношение значения к общей сумме по серии данных. Рассчитывается автоматически и доступно только для числовых полей. |
Особенности:
@tooltipDataвсегда является массивом (возможен пустой массив[]).Свойства
rawNumberиcalculatedPercentприсутствуют только для числовых полей.calculatedPercentвычисляется автоматически на основе суммы значений в рамках текущей серии данных.
Примеры использования массива см. ниже.
Примеры использования
Форматирование подписей значений
Вы можете отформатировать подписи значений, чтобы сделать их более информативными. Например, если вы создали диаграмму дерева, показывающую количество сотрудников магазина за разные годы, можно улучшить подписи сегментов диаграммы. Для этого мы введем следующую команду в поле Форматирование значений в группе настроек Подписи значений:
@point.name + ": " + @point.value + " сотрудников"
У нас получился следующий результат:
Условное форматирование
Мы также можем добавить условное форматирование, чтобы изменить внешний вид подписей в зависимости от значения. Например, если значение больше определенного порога, можно изменить цвет подписи и выделить её жирным:
@point.value > 305 ? @point.name + ": <span style='color: green;'><b>" + @point.value + "</b></span> сотрудников" : @point.name + ": " + @point.value + " сотрудников"Примеры использования массива @tooltipData
Базовый вывод всех добавленных полей (вывод всех доступных дополнительных данных для быстрого ознакомления с ключевыми показателями):
@tooltipData.map(item => item.name + ": " + item.value).join("<br>")
Исходное числовое значение поля (до форматирования). Используется для математических вычислений, логических условий и т.д. (только для числовых полей).
@tooltipData.filter(item => item.rawNumber != null) .map(item => item.name + ": " + item.value + " (raw: " + item.rawNumber + ")") .join("<br>")Табличное представление (представление данных в структурированном табличном виде. Повышает читаемость при большом количестве полей и создает визуально формализованный отчет прямо в тултипе):
"<table><tr><th>Показатель</th><th>Значение</th></tr>" + @tooltipData.map(item => `<tr><td>${item.name}</td><td>${item.value}</td></tr>` ).join("") + "</table>"
Смотрите также