Как настроить внешний вид диаграммы с двумя осями и вертикальными подписями в мобильном приложении 1С?

← На главную

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

Суть проблемы: Ожидание против Реальности

Рассмотрим типичную задачу, с которой мы сталкиваемся при создании дашбордов для руководителей:

Нам необходимо построить диаграмму (график), который отображает данные в двух разных измерениях (например, «Сумма продаж» в миллионах и «Рентабельность» в процентах). Если вам требуется базовое создание и соединение точек в системе координат, стандартный механизм может показаться подходящим.
Для этого мы используем механизм дополнительной оси значений (вторая шкала Y), чтобы наложить два графика друг на друга.
Мы хотим, чтобы подписи значений в точках графика (вершинах) располагались вертикально (под углом 90 градусов), так как на небольшом экране горизонтальные подписи будут перекрывать друг друга.

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

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

Почему так происходит? Разбираемся в архитектуре

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

Особенности мобильного рендеринга:

Автоматическое управление пространством. Мобильный движок считает, что наложение двух графиков с разными масштабами на маленьком экране сделает диаграмму нечитаемой. Поэтому срабатывает принудительный механизм разделения серий.
Алгоритмы Collision Detection. Для текстовых меток на мобильных устройствах работают жесткие алгоритмы предотвращения наложений. Если движок «видит», что повернутая надпись не помещается, он игнорирует настройки.

Анализ попыток решения стандартными средствами

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

Попытка 1: Изменение ориентации меток

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

В коде это может выглядеть так:


Диаграмма.ОбластьПостроения.ШкалаТочек.ОриентацияМетки = ОриентацияМетки.Вертикально;
// или
Диаграмма.ОбластьПостроения.ШкалаЗначений.ОриентацияМетки = ОриентацияМетки.Вертикально;

Результат: Это меняет ориентацию только подписей на самих осях. Надписи непосредственно у точек данных остаются горизонтальными.

Попытка 2: Настройка свойств отображения диаграммы

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

Эффективное решение: Переход на HTML и JavaScript

Если стандартный механизм 1С не позволяет добиться требуемого внешнего вида, единственным профессиональным решением является использование HTML-интерфейса. Подобная разработка пользовательских интерфейсов в 1С с использованием HTML и CSS позволяет полностью обойти ограничения платформы.

Этот подход подразумевает использование объекта ПолеHTMLДокумента.

Почему это работает лучше?

Гибкость: JavaScript библиотеки позволяют настроить любой аспект отображения. Вы можете реализовать даже интерактивные функции для расширения возможностей диаграмм, такие как выделение элементов при нажатии.
Корректная работа с осями: JS-библиотеки без проблем поддерживают множественные оси Y и корректно отображают их на мобильных экранах.
Производительность: Поле HTML документа использует современные движки WebKit с аппаратным ускорением.

Алгоритм реализации решения

Давайте рассмотрим пошагово, как заменить стандартную диаграмму на HTML-аналог.

Шаг 1. Подготовка макета HTML

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

Шаг 2. Формирование данных в 1С

Вместо заполнения объекта Диаграмма, мы формируем JSON-строку:


СтруктураДанных = Новый Структура;
СтруктураДанных.Вставить("labels", МассивДат); // Ось X
СтруктураДанных.Вставить("datasets", Новый Массив);

// Первая серия (основная ось)
Серия1 = Новый Структура;
Серия1.Вставить("label", "Продажи");
Серия1.Вставить("data", МассивПродаж);
Серия1.Вставить("yAxisID", "y-axis-1");
СтруктураДанных.datasets.Добавить(Серия1);

// Вторая серия (дополнительная ось)
Серия2 = Новый Структура;
Серия2.Вставить("label", "Рентабельность");
Серия2.Вставить("data", МассивПроцентов);
Серия2.Вставить("yAxisID", "y-axis-2");
СтруктураДанных.datasets.Добавить(Серия2);

ЗаписьJSON = Новый ЗаписьJSON;
ЗаписьJSON.УстановитьСтроку();
ЗаписатьJSON(ЗаписьJSON, СтруктураДанных);
СтрокаJSON = ЗаписьJSON.Закрыть();

Шаг 3. Настройка внешнего вида в JavaScript

В JS коде мы явно указываем настройки осей и поворота текста:


options: {
    scales: {
        yAxes: [{
            id: 'y-axis-1',
            type: 'linear',
            position: 'left',
        }, {
            id: 'y-axis-2',
            type: 'linear',
            position: 'right',
            gridLines: {
                drawOnChartArea: false
            }
        }]
    },
    plugins: {
        datalabels: {
            rotation: -90, 
            align: 'top',
            color: '#000'
        }
    }
}

Шаг 4. Вывод в форму

Вы объединяете HTML-шаблон с данными JSON и помещаете результат в ПолеHTMLДокумента.

Резюме

Подведем итоги анализа проблемы:

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

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