При создании современных дашбордов и управленческих панелей в 1С:Предприятие 8.3 разработчики часто сталкиваются с тем, что стандартные диаграммы выглядят эффектно только при первом открытии. Красивое «вылетание» столбцов или плавное появление графиков радует глаз, но как только срабатывает обработчик ожидания для обновления данных, вся магия исчезает: диаграмма просто «дергается», мгновенно меняя значения без какой-либо анимации. В этой статье мы подробно разберем, почему так происходит и какие существуют методы для достижения «живой» и приятной глазу визуализации данных.
Прежде чем переходить к решениям, проанализируем, как работает движок отрисовки 1С. В платформе 1С свойство Анимация (с вариантом Использовать) предназначено в первую очередь для первичной инициализации объекта. Когда форма только открывается, платформа отрисовывает диаграмму «с нуля», что и запускает встроенные визуальные эффекты.
Однако при программном изменении данных в уже существующей диаграмме платформа оптимизирует процесс: она не перерисовывает весь объект целиком, а лишь обновляет значения в памяти и меняет геометрию существующих фигур. Для системы это выглядит как изменение состояния, а не создание нового объекта, поэтому «входная» анимация не срабатывает. Установка свойства Обновление = Истина лишь дает команду перерисовать интерфейс, но не инициирует повторный запуск эффектов появления.
Самый простой способ заставить штатную диаграмму снова «вылетать» — это попытаться обмануть механизм отрисовки, сделав вид, что данные абсолютно новые. Рассмотрим, как это можно реализовать программно. Для этого нам потребуется полностью очистить коллекции Серии и Точки, а затем заполнить их заново.
Разберем пример кода, который может быть вызван в обработчике ожидания:
// Отключаем обновление, чтобы пользователь не видел пустую диаграмму
Элементы.ДиаграммаПродаж.Обновление = Ложь;
// Полностью очищаем данные
ДиаграммаПродаж.Серии.Очистить();
ДиаграммаПродаж.Точки.Очистить();
// Заполняем заново (например, из таблицы значений или результата запроса)
Для Каждого СтрокаДанных Из ТЗ_Результат Цикл
НоваяСерия = ДиаграммаПродаж.Серии.Добавить(СтрокаДанных.Период);
НоваяТочка = ДиаграммаПродаж.Точки.Добавить(СтрокаДанных.Показатель);
ДиаграммаПродаж.УстановитьЗначение(НоваяТочка, НоваяСерия, СтрокаДанных.Значение);
КонецЦикла;
// Включаем обновление и устанавливаем режим анимации
ДиаграммаПродаж.Анимация = ИспользованиеАнимацииДиаграммы.Использовать;
Элементы.ДиаграммаПродаж.Обновление = Истина;
Важное замечание: Этот метод имеет существенный недостаток. На быстрых компьютерах и современных версиях платформы вы можете получить желаемый эффект «вылета». Однако на платформе 8.3.14 и ниже часто наблюдается неприятное мерцание или «белый экран» на долю секунды, так как платформа не умеет плавно интерполировать исчезновение старых данных.
Если ваша задача — создать действительно современный и плавный интерфейс уровня веб-приложений, стандартных средств 1С может быть недостаточно. Как справедливо отмечалось в обсуждении, наиболее гибким решением является использование Поля HTML-документа. Это позволяет интегрировать в 1С мощные JavaScript-библиотеки, такие как ECharts, Chart.js или Highcharts.
Разберем по шагам, как это работает:
Строка (для хранения HTML-кода) и элемент формы Поле HTML-документа.Проанализируем пример формирования данных в 1С для передачи в JavaScript:
// Формируем структуру данных для диаграммы
СтруктураДанных = Новый Структура;
СтруктураДанных.Вставить("labels", СписокМесяцев); // Массив названий
СтруктураДанных.Вставить("values", СписокПродаж); // Массив чисел
// Преобразуем в JSON
ЗаписьJSON = Новый ЗаписьJSON;
ЗаписьJSON.УстановитьСтроку();
ЗаписатьJSON(ЗаписьJSON, СтруктураДанных);
СтрокаJSON = ЗаписьJSON.Закрыть();
// Передаем данные в HTML-поле через вызов функции JS
Элементы.ПолеHTMLДиаграмма.Документ.defaultView.updateChart(СтрокаJSON);
В самом HTML-документе функция updateChart примет JSON и вызовет метод обновления библиотеки (например, chart.setOption() в ECharts), который автоматически запустит плавную анимацию перехода состояний.
Выясним причину, почему в некоторых конфигурациях, таких как УНФ (Управление нашей фирмой), анимация иногда работает «из коробки», а иногда нет. В последних версиях платформы (начиная с 8.3.18+) 1С значительно обновила компоненты отрисовки графики и перешла на использование Chromium в качестве движка для тонкого клиента. Это сделало работу стандартных диаграмм более плавной.
Если вы используете версию 8.3.14 (как автор вопроса), ваши возможности сильно ограничены старым рендерером. Посмотрим на рекомендации по обновлению:
Подводя итог нашему анализу, можно выделить два основных пути. Если вам нужно быстрое решение в рамках стандартного функционала 1С — попробуйте метод с полной очисткой коллекций Серии и Точки непосредственно перед заполнением. Это заставит систему инициализировать входную анимацию повторно.
Если же требуется высокое качество визуализации, отсутствие мерцания и плавные переходы «столбец в столбец», рекомендуем рассмотреть внедрение ECharts через Поле HTML-документа. Это потребует базовых знаний JavaScript и HTML, но результат будет на голову выше любых стандартных средств платформы 1С. Помните, что визуальное восприятие отчетов напрямую влияет на лояльность пользователей и эффективность работы с данными.