Как нарисовать граф в 1С: рабочие способы и примеры кода

Под задачей «нарисовать граф в 1С» обычно скрывается одна из трёх ситуаций: нужно показать диаграмму с данными (столбики, график продаж), построить схему связей между объектами (узлы и стрелки, как в блок-схеме или графе маршрутов) либо вывести иерархию в виде дерева. Встроенные средства платформы закрывают все три сценария, но разными объектами, и выбор неправильного инструмента — главная причина мучений разработчика.

Для классических графиков по данным используется объект Диаграмма, который можно разместить на форме или в табличном документе. Для графов в математическом смысле — вершин и рёбер — предназначена ГрафическаяСхема: тот же механизм, что рисует карты бизнес-процессов. Если встроенных средств не хватает, граф строят внешними инструментами (GraphViz, JavaScript-библиотеки) и показывают результат в поле HTML-документа.

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

Определяем, какой именно «граф» нужен

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

Типовые варианты: график продаж по месяцам (диаграмма), граф зависимостей документов по цепочке ввода на основании (графическая схема), маршрутная карта или схема согласования (тоже графическая схема), иерархия подчинённости сотрудников (дерево значений на форме). Отдельный случай — график занятости ресурсов во времени: для него есть специализированная диаграмма Ганта.

График по данным: объект Диаграмма на форме

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

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

&НаКлиенте
Процедура СформироватьГрафик(Команда)
	Диаграмма.Очистить();
	Диаграмма.ТипДиаграммы = ТипДиаграммы.График;
	Серия = Диаграмма.Серии.Добавить("Продажи");
	ДанныеГрафика = ПолучитьДанныеНаСервере();
	Для Каждого Строка Из ДанныеГрафика Цикл
		Точка = Диаграмма.Точки.Добавить(Строка.Период);
		Диаграмма.УстановитьЗначение(Точка, Серия, Строка.Сумма);
	КонецЦикла;
КонецПроцедуры

Для графика с несколькими показателями добавьте несколько серий — например, «План» и «Факт». Точки должны совпадать по составу для всех серий, иначе график будет выглядеть рваным: отсутствующее значение отображается как разрыв линии. Если точек много (сотни и больше), включите прокрутку или агрегируйте данные до разумного числа точек — иначе подписи осей слипнутся.

Диаграмма в табличном документе и печатной форме

Если график нужен в отчёте на СКД или в печатной форме, используется тот же объект Диаграмма, но размещённый в макете табличного документа. В макете создайте область, добавьте рисунок типа «Диаграмма» и задайте ему имя. При выводе отчёта получите рисунок через коллекцию рисунков табличного документа и заполните его данными перед выводом области.

Для отчётов на СКД есть более простой путь: в настройках отчёта на закладке «Настройки» добавьте элемент «Диаграмма» в структуру, выберите ресурс и поле точек. СКД сама построит диаграмму без единой строки кода — этого достаточно для большинства аналитических отчётов. Программное заполнение нужно, только когда логику данных нельзя выразить запросом.

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

Граф «узлы и связи»: объект ГрафическаяСхема

Для настоящего графа — вершин и рёбер — платформа предлагает объект ГрафическаяСхема. Это тот же движок, которым рисуются карты маршрутов бизнес-процессов, но его можно заполнять программно произвольными элементами. Добавьте на форму реквизит типа ГрафическаяСхема и выведите его на форму.

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

&НаСервере
Процедура ПостроитьГрафСвязей()
	Схема = РеквизитФормыВЗначение("ГрафСхема");
	Схема.ЭлементыГрафическойСхемы.Очистить();
	Узел1 = Схема.ЭлементыГрафическойСхемы.Добавить(Тип("ЭлементГрафическойСхемыДействие"));
	Узел1.Наименование = "Заказ покупателя";
	Узел1.Лево = 50; Узел1.Верх = 50;
	Узел1.Ширина = 120; Узел1.Высота = 40;
	Узел2 = Схема.ЭлементыГрафическойСхемы.Добавить(Тип("ЭлементГрафическойСхемыДействие"));
	Узел2.Наименование = "Реализация";
	Узел2.Лево = 250; Узел2.Верх = 50;
	Узел2.Ширина = 120; Узел2.Высота = 40;
	Линия = Схема.ЭлементыГрафическойСхемы.Добавить(Тип("ЭлементГрафическойСхемыДекоративнаяЛиния"));
	Линия.ПервыйЭлемент = Узел1;
	Линия.ВторойЭлемент = Узел2;
	ЗначениеВРеквизитФормы(Схема, "ГрафСхема");
КонецПроцедуры

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

Диаграмма Ганта для интервалов и маршрутов

Если «граф» в вашей задаче — это временная шкала с интервалами (загрузка оборудования, этапы проекта, маршрут транспорта), используйте ДиаграммуГанта. Она строится по точкам (ресурсам или задачам), сериям и интервалам с датами начала и окончания. Платформа сама раскладывает интервалы по строкам, избегая пересечений.

Заполнение аналогично обычной диаграмме, но вместо одного значения вы добавляете интервал: Значение.Добавить() возвращает интервал, у которого задаются Начало и Конец. Диаграмма Ганта поддерживает связи между интервалами — стрелки «окончание-начало», что визуально превращает её в граф зависимостей задач.

Ограничение: диаграмма Ганта тяжёлая при большом числе точек. Сотни строк с десятками интервалов каждая могут заметно тормозить отрисовку в тонком клиенте. Фильтруйте данные по периоду и подразделению перед построением.

Внешние инструменты: GraphViz и HTML-поле

Когда встроенных средств не хватает — нужен граф с автоматической красивой раскладкой, интерактивностью или нестандартным оформлением — результат генерируют внешними средствами и показывают в поле HTML-документа на форме. Два рабочих варианта: рендеринг через утилиту GraphViz в файл SVG/PNG на сервере и генерация HTML со встроенной JS-библиотекой (например, vis-network или D3.js).

Схема работы с GraphViz: на сервере формируете текстовое описание графа на языке DOT, вызываете утилиту dot через командную строку, получаете SVG и помещаете его в поле HTML-документа. Раскладку узлов GraphViz делает сам — это его главное преимущество перед ГрафическойСхемой. Минус — требуется установка GraphViz на сервере 1С и права на запуск внешних приложений, что в сервисах вроде облачных аренд может быть запрещено.

Вариант с JS-библиотекой не требует ничего устанавливать: формируете HTML-текст с подключённым скриптом и JSON-описанием узлов и рёбер, присваиваете его полю HTML-документа. Интерактивность (перетаскивание узлов, масштабирование) достаётся бесплатно. Обратная связь в 1С возможна через обработку события ПриНажатии поля HTML, но в тонком и веб-клиенте возможности взаимодействия ограничены — проверяйте на целевом клиенте.

Проверка результата и типичные ошибки

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

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

Частые вопросы