В современной разработке на платформе 1С всё чаще возникает потребность в создании эстетичных и интуитивно понятных интерфейсов. Одной из таких задач является визуализация числового значения на цветовой шкале (например, от красного до зеленого), чтобы пользователь мог мгновенно оценить статус показателя. Стандартные диаграммы 1С не всегда позволяют добиться такого специфического вида, поэтому мы рассмотрим альтернативные и наиболее эффективные методы реализации этой задачи.
Проанализируем самый современный и «легкий» способ — использование масштабируемой векторной графики (SVG). Начиная с версии платформы 8.3.10, 1С отлично работает с форматом SVG, что позволяет нам генерировать графику программно. Суть метода заключается в формировании текстовой строки в формате XML, которая описывает геометрию нашей шкалы.
Разберем по шагам процесс создания такой шкалы:
linearGradient, указывая точки перехода цветов.Посмотрим на пример формирования SVG-строки в коде 1С:
Функция СформироватьSVGШкалу(ЗначениеПроцент) Экспорт
// ЗначениеПроцент — число от 0 до 100
Ширина = 400;
Высота = 40;
ПозицияМаркера = (ЗначениеПроцент / 100) * Ширина;
SVG =
"<svg width='" + Ширина + "' height='" + (Высота + 20) + "' xmlns='http://www.w3.org/2000/svg'>
| <defs>
| <linearGradient id='grad' x1='0%' y1='0%' x2='100%' y2='0%'>
| <stop offset='0%' style='stop-color:rgb(255,0,0);stop-opacity:1' />
| <stop offset='50%' style='stop-color:rgb(255,255,0);stop-opacity:1' />
| <stop offset='100%' style='stop-color:rgb(0,255,0);stop-opacity:1' />
| </linearGradient>
| </defs>
| <rect x='0' y='10' width='" + Ширина + "' height='" + Высота + "' fill='url(#grad)' rx='5' ry='5' />
| <circle cx='" + ПозицияМаркера + "' cy='" + (Высота / 2 + 10) + "' r='10' fill='white' stroke='black' stroke-width='2' />
|</svg>";
Возврат SVG;
КонецФункции
Эту строку можно вывести в 1С через объект Картинка или поместить в ПолеHTMLДокумента. Главное преимущество этого метода — отсутствие внешних зависимостей и мгновенная отрисовка.
Выясним, как реализовать аналогичную задачу, если нам нужно больше интерактивности или если мы хотим использовать возможности браузерного движка, встроенного в 1С. Мы можем использовать ПолеHTMLДокумента и стандартные стили CSS.
Для создания градиента нам понадобится свойство linear-gradient. Проанализируем ситуацию: нам нужно создать контейнер для шкалы и абсолютно позиционированный элемент для бегунка. Рассмотрим пример HTML-кода, который можно динамически собирать в 1С:
Процедура ОбновитьШкалуНаФорме(ТекущееЗначение)
HTMLТекст =
"<html>
|<body style='margin:0; padding:10px; overflow:hidden;'>
| <div style='position:relative; width:100%; height:30px;
| background: linear-gradient(to right, red, yellow, green);
| border-radius: 15px; border: 1px solid #ccc;'>
| <div id='marker' style='position:absolute; top:-5px; left:" + ТекущееЗначение + "%;
| width:20px; height:40px; background: white;
| border: 2px solid #333; border-radius: 4px;'>
| </div>
| </div>
|</body>
|</html>";
Элементы.ПолеHTMLШкала.УстановитьТекст(HTMLТекст);
КонецПроцедуры
Важный момент: при таком подходе мы можем изменять положение маркера без полной перезагрузки страницы, используя JavaScript через метод Документ.getElementById("marker").style.left.
Если задача требует сложной анимации, делений на шкале или всплывающих подсказок, рассмотрим подробнее использование специализированных библиотек, таких как AmCharts (версии 3 или 4), Chart.js или ApexCharts.
Эти библиотеки позволяют создавать профессиональные индикаторы (Gauges). Например, в AmCharts 4 можно создать горизонтальный XYChart, где одна из осей будет представлять собой градиентную заливку. Несмотря на то что это требует подключения внешних файлов (или вставки их кода в макет конфигурации), результат выглядит максимально эффектно.
Разберем по шагам, как подключить такую библиотеку:
Макет 1С (тип макета — Текстовый документ или Двоичные данные).ПриСозданииНаСервере или через обработчик ожидания передаем данные в JS-функцию.Иногда диаграмму нужно вывести не на форму, а в печатную форму или отчет. В этом случае HTML не всегда подходит. Посмотрим на пример того, как можно обойтись средствами самого табличного документа.
Мы можем использовать коллекцию Рисунки табличного документа. Хотя напрямую залить рисунок градиентом сложно, мы можем применить хитрость: использовать заранее подготовленную картинку градиента в качестве фона, а поверх неё программно рисовать и позиционировать объект типа Прямоугольник или Линия, который будет выполнять роль указателя.
Процедура ВывестиШкалуВТаблицу(ТабДок, Значение)
РисунокГрадиент = ТабДок.Рисунки.Добавить(ТипРисункаТабличногоДокумента.Картинка);
РисунокГрадиент.Картинка = БиблиотекаКартинок.ФонГрадиентКрасныйЗеленый;
// Устанавливаем координаты размещения...
Маркер = ТабДок.Рисунки.Добавить(ТипРисункаТабличногоДокумента.Прямоугольник);
// Рассчитываем координату Лево в зависимости от Значения
Маркер.Лево = НачалоШкалы + (Значение * КоэффициентШирины);
Маркер.Ширина = 2;
Маркер.ЦветЛинии = ЦветаСтиля.ЦветОтрицательногоПоказателя;
КонецПроцедуры
Проанализируем ситуацию и выберем оптимальный метод в зависимости от условий задачи:
Таким образом, мы видим, что отсутствие встроенного стандартного элемента «Градиентная шкала» в 1С не является препятствием. Комбинируя ПолеHTMLДокумента и возможности графических стандартов типа SVG, можно реализовать визуализацию любой сложности, которая будет работать стабильно и выглядеть современно.