Как сделать график 1С: от настройки СКД до кода

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

Создание графического объекта может быть реализовано несколькими способами в зависимости от версии платформы и решаемых задач. Наиболее распространенным методом является использование системы компоновки данных (СКД), которая позволяет строить графики без написания программного кода.

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

Использование системы компоновки данных для построения диаграмм

Система компоновки данных (СКД) — это стандартный инструмент платформы, который берет на себя основную работу по агрегации и визуализации информации. Чтобы создать график, вам не нужно писать сложные запросы вручную, достаточно грамотно настроить макет.

В редакторе схемы компоновки данных необходимо перейти на вкладку настроек и выбрать опцию Оформление. Здесь вы найдете параметр Диаграмма, который по умолчанию отключен. Его активация превращает табличный отчет в визуальную схему.

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

Важно правильно сопоставить измерения и ресурсы. Поля, которые будут отображаться по оси X (категории), должны быть измерениями, а поля для оси Y (значения) — ресурсами. Ошибка в этом сопоставлении приведет к тому, что график будет пустым или нечитаемым.

⚠️ Внимание: В старых версиях платформы (до 8.3.10) функционал диаграмм в СКД был ограничен. Если вы работаете на релизе ниже 8.3.15, некоторые типы визуализации могут отсутствовать или работать некорректно. Всегда сверяйте возможности вашей конфигурации с документацией к конкретной версии платформы.

Программное создание графика на встроенном языке

Когда стандартных возможностей СКД недостаточно, разработчики обращаются к объекту Диаграмма в коде 1С. Этот подход дает полный контроль над каждым пикселем отображения и позволяет реализовать сложную интерактивность.

Процесс начинается с создания нового объекта диаграммы и очистки его содержимого. Затем необходимо определить набор точек данных. Каждая точка характеризуется значением, категорией и, опционально, цветом или комментарием.

Для добавления данных используется метод Точки.Добавить(). Внутри этого метода вы передаете значения осей. Например, для построения графика продаж по месяцам по оси X передается месяц, а по оси Y — сумма выручки.

Особое внимание следует уделить объекту НастройкиДиаграммы. Через него можно менять цвета серий, включать сетку, настраивать подписи к осям и задавать заголовки. Без тонкой настройки график может выглядеть блекло или быть непонятным для пользователя.

// Пример создания простой диаграммы
Диаграмма = Новый Диаграмма();
Диаграмма.Очистить();

Диаграмма.ТипДиаграммы = ТипДиаграммы.Гистограмма;
Диаграмма.ПоказыватьЛегенду = Истина;

// Добавление серии данных
Серия = Диаграмма.Серии.Добавить();
Серия.Имя = "Продажа";
Серия.Значения.Добавить(100);
Серия.Значения.Добавить(150);
Серия.Значения.Добавить(120);

// Назначение категорий
Диаграмма.ПодписиКатегорий.Добавить("Январь");
Диаграмма.ПодписиКатегорий.Добавить("Февраль");
Диаграмма.ПодписиКатегорий.Добавить("Март");

ЭлементФормы.Диаграмма = Диаграмма;

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

Настройка осей и масштабирования для точности данных

Корректное отображение шкал — залог правильного восприятия информации. Неправильно настроенная ось Y может визуально преувеличивать незначительные колебания или, наоборот, скрывать важные тренды.

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

Логарифмическая шкала — мощный инструмент для работы с данными, имеющими огромный разброс значений. Если у вас есть продажи от 100 рублей до 10 миллионов, линейная шкала сделает малые значения невидимыми. Логарифмическое отображение сгладит этот перепад.

Не забывайте про форматирование подписей. Отображение чисел с десятью знаками после запятой загромождает график. Используйте форматную строку ЧГ=0 для целых чисел или ЧЦ=2 для денежного формата с двумя знаками.

Параметр настройки	Описание влияния	Рекомендуемое значение
Шаг сетки	Определяет частоту линий разметки	Автоматически или 1/5 от диапазона
Пересечение осей	Место, где ось X пересекает ось Y	0 (ноль) или Минимум
Формат подписей	Вид отображения чисел на осях	ЧЦ=2; ЧРД=.
Поворот подписей	Угол наклона текста категорий	45 градусов для длинных названий

Работа с несколькими сериями данных и легендой

Бизнес-аналитика редко ограничивается одним показателем. Часто требуется сравнить план и факт, данные за текущий и прошлый год, или показатели разных подразделений на одном поле.

Для этого в объект Диаграмма добавляются несколько серий. Каждая серия может иметь свой уникальный цвет и стиль линии (сплошная, пунктирная). Различие стилей помогает пользователям с особенностями цветовосприятия различать данные.

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

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

⚠️ Внимание: При наложении серий друг на друга (например, столбчатая диаграмма с несколькими показателями) задний ряд может быть полностью перекрыт передним. Используйте режим "Наложение" с прозрачностью или режим "Группировка", чтобы все данные были видны.

Как сделать серию прозрачной?

В свойствах серии установите параметр "Прозрачность" (Opacity). Значение 0 означает полную прозрачность, 100 — полную непрозрачность. Для эффекта наложения используйте значение около 40-50%.

Интерактивность и события пользовательского интерфейса

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

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

Обработка событий мыши позволяет реализовать сценарий "Drill-down". При двойном клике на столбец "Январь" система может открыть отчет с детализацией по дням этого месяца. Это реализуется через обработчик события ПриВыбореТочки.

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

Реализация интерактива требует аккуратности в коде. Обработчики событий не должны содержать тяжелых запросов к базе данных, иначе интерфейс будет "подвисать" при каждом движении мыши. Тяжелую логику лучше выносить в отдельные фоновые задания.

Экспорт графических данных и печать отчетов

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

Для печати используется объект ПечатнаяТаблица или механизмы вывода в MXL. Заранее проверяйте контрастность серий.

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

При формировании файлов для выгрузки во внешние системы (например, для веб-порталов) убедитесь, что кодировка текста в подписях осей корректна (обычно UTF-8), чтобы вместо кириллицы не появились "кракозябры".

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

Частые ошибки и оптимизация производительности

Разработчики часто сталкиваются с проблемой "тормозов" при открытии форм с графиками. Основная причина — попытка отрисовать тысячи точек данных одновременно. Браузер или клиент 1С просто не справляется с рендерингом такого количества объектов.

Первое правило оптимизации: агрегируйте данные перед передачей в диаграмму. Если вам нужна динамика за год, не передавайте данные по секундам или минутам. Используйте группировку по дням, неделям или месяцам на уровне запроса.

Второй момент — отключение лишних элементов декора. Тени, градиенты, сложные рамки и 3D-эффекты сильно нагружают видеоподсистему клиента. В корпоративных интерфейсах лучше использовать плоский дизайн (Flat Design).

• 📉 Не передавайте в диаграмму более 500-1000 точек данных без предварительной агрегации.
• 🎨 Избегайте использования 3D-эффектов, они искажают восприятие пропорций и снижают скорость работы.
• 💾 Очищайте объект диаграммы перед новым заполнением, чтобы избежать дублирования серий при обновлении формы.
• 🔍 Проверяйте наличие значений Null в данных, они могут разрывать линию графика или создавать пустые промежутки.

⚠️ Внимание: При работе в веб-клике (браузере) рендеринг сложных диаграмм зависит от JavaScript-движка браузера и мощности компьютера пользователя. Всегда тестируйте отчеты на слабых машинах, а не только на мощном сервере разработчика.

FAQ: Вопросы по построению графиков в 1С

Можно ли изменить цвет конкретной точки на графике в СКД?

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

Почему график не отображается в веб-клике, хотя в толстом клиенте все работает?

Это может быть связано с отсутствием необходимых компонентов визуализации в версии платформы для веб-клиента или некорректными путями к ресурсам. Также проверьте, не используется ли специфический шрифт, который не установлен на сервере или недоступен в браузере. Убедитесь, что версия платформы сервера и клиента совместима.

Как сделать комбинированную диаграмму (столбцы + линия)?

Для этого нужно добавить две серии данных в объект диаграммы. Первой серии задать тип "Гистограмма" (столбцы), а второй — тип "График" (линия). В настройках осей убедитесь, что обе серии используют одну ось Y, либо, если масштабы сильно отличаются, настройте вторую ось Y для одной из серий.

Можно ли анимировать появление графика при открытии формы?

Стандартными средствами платформы 1С анимация появления диаграммы не предусмотрена. Диаграмма отрисовывается мгновенно после получения данных. Для реализации анимации потребовалось бы вмешательство на уровне JavaScript в веб-клиенте, что выходит за рамки стандартной конфигурации и усложняет поддержку.

Как отобразить на графике целевое значение (плановую линию)?

Добавьте еще одну серию данных, где все точки будут иметь одинаковое значение, равное плану. Тип этой серии лучше выбрать "Линия" или "Точка". В легенде назовите её "План". Это создаст визуальную горизонтальную черту, с которой удобно сравнивать фактические показатели.