Диаграмма Пуля (Bullet). Отображаем графики ToastUI в веб клиенте 1С

13.05.24

Разработка - Работа с интерфейсом

Диаграмма Пуля (Bullet) очень удобна для отображения плана и факта, и вообще для разных значений одного показателя. Эта диаграмма отсутствует в стандартных 1Сных. Зато есть в библиотеке ToastUI Charts: https://github.com/nhn/tui.chart.

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование По подписке [?] Купить один файл
Даграмма Пуля (Bullet) в виде обработки. Не требует веб сервиса.
.epf 145,47Kb
1
1 Скачать (1 SM) Купить за 1 850 руб.
Расширение для отображения графиков ToastUI в веб клиенте, толстом и тонком клиентах для windows
.cfe 189,55Kb
1
1 Скачать (1 SM) Купить за 1 850 руб.

Решение 1Chart - мощь HTML5 диаграмм библиотеки ToastUI в 1С позволяет строить разные диаграммы, но имеет два недостатка:

1. Не реализован график Bullet (Пуля)

2. Без обработки напильником не работает в веб клиенте.

Данное решение закрывает оба недостатка.

 

Диаграмма Пуля (Bullet)

Этот вид диаграммы удобен, например, для  показа наполненности водохранилищ. Цветом можно выделить, если уровень упал ниже минимального или поднялся выше допустимого. Трудность возникла из-за того, что водохранилища очень разные. Ёмкость отличается в тысячи раз. Если показывать в абсолютных величинах, то маленькие совсем теряются. Поэтому в данном решении есть возможность нормализовать значения и строить график по относительным значениям.
В демо обработке даны два варианта Пули. По абсолютным и по относительным значениям.

Чтобы меньше морочить людям голову сериями и диапазонами, график может строиться по таблице значений. Каждая строка значения это отдельная серия диаграммы. Название серии идёт в первой колонке. Значение серии во второй колонке. Начиная с третьей колонки идут значения диапазонов. Значением диапазона может быть массив с двумя числами или число, в этом случае диапазон отсчитывается от нуля. Кроме того в таблице значений может быть строковая колонка Цвет, где указывается цвет серии. В колонке Метки указываются значения меток на серии - массив чисел или одно число.

 

HTTP сервис

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

Для того, чтобы отобразить диаграмму на форме в поле html документа кладётся ссылка вида http://127.0.0.1/toastui/hs/lyaytoast/075be752-4997-49b9-9d03-4e94ee56f653 , где
http://127.0.0.1/toastui - путь к базе на веб сервере
lyaytoast - имя хттп сервиса в расширении
075be752-4997-49b9-9d03-4e94ee56f653 -  уникальный идентификатор под которым текст диаграммы сохранён в регистре сведений.

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

 
 

Если используется хттп сервис, то и скрипты предоставляет он же. Обращений к сторонним ресурсам не выполняется. Это может быть полезно, если нет доступа в интернет.

 

	тзНаполнениеВодохранилищ = Новый ТаблицаЗначений;
	тзНаполнениеВодохранилищ.Колонки.Добавить("Водохранилище");
	тзНаполнениеВодохранилищ.Колонки.Добавить("МаксимальноеНаполнение", , "Макс.");
	тзНаполнениеВодохранилищ.Колонки.Добавить("ТекущееНаполнение", , "Текущее");
	тзНаполнениеВодохранилищ.Колонки.Добавить("МинимальноеНаполнение", , "Мин.");
	тзНаполнениеВодохранилищ.Колонки.Добавить("Цвет");
	тзНаполнениеВодохранилищ.Колонки.Добавить("Метки");
	
	стрТЗ = тзНаполнениеВодохранилищ.Добавить();
	стрТЗ.Водохранилище = "Чиркейское";
	стрТЗ.МаксимальноеНаполнение = 2.78;
	стрТЗ.МинимальноеНаполнение = 0.5;
	стрТЗ.ТекущееНаполнение = 2.5;
	стрТЗ.Цвет = "#00CC99";
	масМеток = Новый Массив;
	масМеток.Добавить(2.6);
	масМеток.Добавить(1.8);
	стрТЗ.Метки = масМеток;

	стрТЗ = тзНаполнениеВодохранилищ.Добавить();
	стрТЗ.Водохранилище = "Гергебильское";
	стрТЗ.МаксимальноеНаполнение = 0.00119;
	стрТЗ.МинимальноеНаполнение = 0.0001;
	стрТЗ.ТекущееНаполнение = 0.00019;
	стрТЗ.Цвет = "#00CC99";
	стрТЗ.Метки = 0.0011;
	
	стрТЗ = тзНаполнениеВодохранилищ.Добавить();
	стрТЗ.Водохранилище = "Ирганайское";
	стрТЗ.МаксимальноеНаполнение = 0.601;
	стрТЗ.МинимальноеНаполнение = 0.2;
	стрТЗ.ТекущееНаполнение = 0.8;
	стрТЗ.Цвет = "rgba(255, 0, 0, 0.5)";
	стрТЗ.Метки = 0.5;

	масЦветовДиапазонов = Новый Массив;
	масЦветовДиапазонов.Добавить("rgba(10, 10, 200, 0.5)");
	масЦветовДиапазонов.Добавить("rgba(128, 10, 10, 0.5)");
	ТекстовыйДокумент = lyayToast_Диаграммы.ПолучитьГрафикПуля(тзНаполнениеВодохранилищ, "Относительная заполненность водохранилищ км3", 640, 480, масЦветовДиапазонов,, Истина);
	html_Диаграммы = lyayToast_Диаграммы.ПолучитьСсылкуНаДиаграмму(ТекстовыйДокумент.ПолучитьТекст());

К сожалению, под Ubuntu 23.10 на 1С 8.3.24.1342 отобразить графики не удалось ни в толстом, ни в тонком клиенте.

Проверено на следующих конфигурациях и релизах:

  • Бухгалтерия предприятия, редакция 3.0, релизы 3.0.151.27

См. также

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Богатый редактор картинок 1С предназначен для обработки изображений в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    62995    44    59    

82

Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 1С:ERP Управление предприятием 2 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    18864    26    6    

41

Работа с интерфейсом Программист Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Россия Платные (руб)

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

1500 руб.

06.10.2020    10237    7    7    

10

Работа с интерфейсом Программист Стажер Платформа 1С v8.3 Бесплатно (free)

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

20.08.2024    16873    mrXoxot    43    

121

Работа с интерфейсом Программист Платформа 1С v8.3 Бесплатно (free)

Пример простого и симпатичного прогресс-бара в динамическом списке, без картинок, используя редактирование запроса.

27.05.2024    7407    smielka    37    

100

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    14819    916    elcoan    47    

117

Инструментарий разработчика Работа с интерфейсом Программист Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

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

2 стартмани

10.04.2023    11921    162    acces969    31    

124
Оставьте свое сообщение