Форматирование виджета "Круговая диаграмма"
Форматирование может применяться в следующих элементах виджета:
Подпись в центре
Подписи (формат значений Настраиваемый)
Подсказка (формат значений Настраиваемый)
При работе с форматированием Подпись в центре можно использовать следующую зарезервированную команду:
@total- сумма значений всех точек в серии
При работе с форматированием подписей и подсказок можно использовать следующие зарезервированные команды:
@value.y– значение сектора;@value.formattedY– значение сектора, отформатированное через пользовательский интерфейс;@point.name- название сектора;@point.formattedName– название сектора, отформатированное через пользовательский интерфейс;@point.color- цвет подписи сектора;@series.name- название показателя;@total- сумма значений всех точек в серии.
При работе с форматированием подсказок можно также использовать массив @tooltipData, который представляет собой массив дополнительных полей, доступных для кастомизации в пользовательских форматтерах тултипов. Каждый элемент массива представляет одно поле с метаданными для отображения в подсказке:
Структура элемента массива:
Свойство | Тип | Описание |
|---|---|---|
|
| Отображаемое название поля. |
|
| Отформатированное (готовое для вывода) значение поля. |
|
| Исходное числовое значение до какого-либо форматирования. Это "сырые" данные, предназначенные исключительно для создания пользовательского шаблона подсказки. Используется для математических вычислений, логических условий и т.д. Отличие от
|
|
| Процентное соотношение значения к общей сумме по серии данных. Рассчитывается автоматически и доступно только для числовых полей. |
Особенности:
@tooltipDataвсегда является массивом (возможен пустой массив[]).Свойства
rawNumberиcalculatedPercentприсутствуют только для числовых полей.calculatedPercentвычисляется автоматически на основе суммы значений в рамках текущей серии данных.
Примеры использования массива см. ниже.
Примеры использования
Вывод итогового значения в центр круга
Вы можете вывести итоговый результат значений в центр круга. Для это необходимо ввести следующую команду в поле Текст элемента Подпись в центре:
@total
Отображение диапазона, в который входит сектор
Вы можете задавать диапазон, в который входит тот или иной сектор диаграммы. Для этого необходимо выполнить следующую команду в поле Форматирование раздела Подписи:
(@value.y/@total*100)>30 ? @point.name='Более 30%':(@value.y/@total*100)<30 && (@value.y/@total*100)>15?@point.name='Более 15% и менее 30%':(@value.y/@total*100)<10 ?@point.name='Менее 10%':''
В данной команде задается условие (например, (@value.y/@total*100)>30) и текст сегмента, который при этом должен отображаться (например, @point.name='Более 30%'):
Примеры использования массива @tooltipData
Базовый вывод всех добавленных полей (вывод всех доступных дополнительных данных для быстрого ознакомления с ключевыми показателями):
@tooltipData.map(item => item.name + ": " + item.value).join("<br>")Вывод с процентным соотношением (отображение не только абсолютного значения, но и относительной доли от этой категории в общем объеме по серии):
@tooltipData.map(item => { const percent = item.calculatedPercent != null ? ` (${item.calculatedPercent.toFixed(1)}%)` : ''; return item.name + ": " + item.value + percent; }).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>"
Смотрите также