Как реализовать отображение секторной диаграммы процента оплаты в динамическом списке 1С

← На главную

При разработке интерфейсов в 1С:Предприятие часто возникает задача наглядной визуализации состояния взаиморасчетов. Секторная диаграмма в колонке динамического списка позволяет пользователю мгновенно оценить степень оплаты счета или накладной, не вчитываясь в цифры. Разберем подробно, как реализовать этот функционал, начиная от стандартных приемов и заканчивая современными методами динамической отрисовки.

Метод 1. Использование коллекции картинок и индексации

Это классический способ, который используется в типовых конфигурациях, таких как УНФ или ERP. Рассмотрим его детально. Суть заключается в создании одного графического файла, содержащего набор иконок (состояний) с определенным шагом (например, 0%, 10%, 20% ... 100%).

Проанализируем шаги реализации:

Создаем в метаданных общую картинку (Библиотека картинок), установив свойство Коллекция картинок.
В динамическом списке (в запросе) вычисляем индекс картинки. Если у нас 11 картинок (от 0 до 100 с шагом 10), формула в запросе будет выглядеть следующим образом:


ВЫБОР
    КОГДА Накладная.СуммаДокумента = 0 ТОГДА 0
    ИНАЧЕ ВЫРАЗИТЬ((Накладная.СуммаОплаты / Накладная.СуммаДокумента) * 10 КАК ЧИСЛО(10, 0))
КОНЕЦ КАК ИндексКартинкиОплаты

Важно помнить, что в свойстве колонки динамического списка ПутьКДаннымКартинки необходимо указать созданное поле ИндексКартинкиОплаты, а в свойстве КартинкиСтрок — выбрать вашу общую картинку из библиотеки. Система сама сопоставит числовое значение из запроса с порядковым номером иконки в коллекции.

Метод 2. Текстовые индикаторы на базе символов Unicode

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

Рассмотрим пример настройки запроса для вывода таких символов:


ВЫБОР
    КОГДА Процент < 25 ТОГДА "○" // Пустой круг
    КОГДА Процент >= 25 И Процент < 50 ТОГДА "◔" // Четверть
    КОГДА Процент >= 50 И Процент < 75 ТОГДА "◑" // Половина
    КОГДА Процент >= 75 И Процент < 100 ТОГДА "◕" // Три четверти
    ИНАЧЕ "●" // Полный круг
КОНЕЦ КАК ВизуализацияПроцента

Этот метод идеально подходит, если высокая детализация (точность до 1%) не требуется, а приоритетом является скорость работы интерфейса при больших объемах данных.

Метод 3. Динамическая генерация SVG (для платформы 8.3.15+)

Если нам важен каждый процент, проанализируем возможности формата SVG. Платформа 1С позволяет отображать SVG-код в качестве картинки. Мы можем формировать строку XML, описывающую секторную диаграмму, прямо на сервере.

Разберем по шагам логику реализации:

Поскольку динамический список не может напрямую рендерить строку кода как изображение, нам необходимо заранее подготовить данные.
При записи документа или в фоновом задании рассчитываем координаты для SVG Path и формируем строку.
Сохраняем эту строку в реквизит документа с типом Строка или в отдельный справочник-кеш.
В динамическом списке выводим это поле.

Пример структуры SVG для половины круга (50%):


<svg width="16" height="16" viewBox="0 0 16 16">
  <circle r="8" cx="8" cy="8" fill="lightgray" />
  <path d="M 8 8 L 8 0 A 8 8 0 0 1 8 16 Z" fill="green" />
</svg>

Важный нюанс: динамическая генерация SVG непосредственно в запросе через строковые операции — задача трудоемкая и может снизить производительность. Рекомендуется использовать кэширование готовых SVG-строк в базе данных.

Метод 4. Использование шрифтов-иконок

Посмотрим на альтернативный вариант — использование специализированных шрифтов (Icon Fonts). Существуют шрифты, где символы от "a" до "z" представляют собой круговые диаграммы с разной степенью заполнения.

Для реализации этого метода выполним следующие действия:

Установим шрифт на стороне клиента (или внедрим его в платформу, если используется веб-клиент).
В условном оформлении динамического списка установим для нужной колонки шрифт с иконками.
В запросе сопоставим процент оплаты соответствующему символу шрифта.

Сравнение подходов и рекомендации

Проанализируем ситуацию с точки зрения производительности и удобства поддержки:

Коллекция картинок (шаг 10%): Самый сбалансированный метод. Позволяет избежать визуального шума и не нагружает систему. 10 градаций обычно достаточно для оперативной работы менеджера.
SVG: Обеспечивает максимальную красоту и точность, но требует сложной предварительной подготовки данных (рендеринга при записи документа).
Unicode: Лучший выбор для минималистичных интерфейсов и мобильных приложений на базе 1С.

Важный момент: при реализации любого из методов старайтесь избегать избыточности. Юзабилити-исследования показывают, что индикация каждого процента (например, разница между 42% и 43%) в табличном списке чаще мешает, чем помогает. Оптимальным считается использование 5–10 состояний индикатора.

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