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

13.05.24

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

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

Скачать исходный код

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

Решение 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 Платные (руб)

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

2400 руб.

29.06.2020    17208    23    4    

37

Новогоднее оформление для 1С

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

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

27.12.2023    11699    776    elcoan    47    

108

Конструктор HTML, CSS и javascript

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

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

2 стартмани

10.04.2023    10222    157    acces969    31    

120

Модель состояния для MVC

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

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    4218    kalyaka    4    

31

Условное оформление элементов форм в пользовательском режиме 1С (управление видимостью и доступностью элементов форм)

Работа с интерфейсом Платформа 1С v8.3 Платные (руб)

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

6000 руб.

18.01.2022    9114    1    2    

6

Программный интерфейс для доработки форм

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

Реализовал простой способ программного создания новых элементов, команд и реквизитов на форме.

25.11.2021    10033    AtamanovYS    19    

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