1Chart - мощь HTML5 диаграмм библиотеки ToastUI в 1С

21.12.23

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

+68 –

Красивые диаграммы и графики средствами javascript библиотеки ToastUI для формы HTML и выгрузки на сайт.

1Charts

Библиотека использования диаграмм ToastUI для 1С:Предприятие

ToastUI Charts: https://github.com/nhn/tui.chart

Репозиторий 1Charts: https://github.com/Bayselonarrend/1Charts

Приемущества использования диаграмм ToastUI из 1С:

Широкие возможности по настройке
Универсальность формата HTML
Разнообразие видов диаграмм
Интерактивность

При помощи данной библиотеки вы можете создавать HTML5 диаграммы на основе ToastUI в 1С. Для этого достаточно вызывать экспортные методы модуля и передавать туда необходимые данные. Чаще всего это Категории и Серии. Для начала использования достаточно забрать общий модуль ToastUI.bsl из корня репозитория себе в конфигурацию. Больше никаких дополнительных действий не требуется, однако есть несколько важных моментов:

Данные диаграммы скорее всего не будут отображаться в полях HTML на старых версиях 1С, где используется IE
В методе HTMLМакетСтраницы(), который отвечает за формирование оснастки HTML документа, источником скрипта ToastUI прописан CDN (сторонний сервер в интернете). Если вам важно сохранять работоспособность скрипта при отсутствии доступа к Интернет, данный скрипт необходимо скачать, а в качестве источника прописать локальный путь
Для отображения диаграмм в поле HTML, как результат функции по умолчанию возвращается объект типа ТекстовыйДокумент, который на стороне клиента необходимо записать на диск. Необходимость записи связана с тем, что при прямом вводе HTML как строки, WebKit блокирует выполнение js ToastUI. Если вы не собираетесь использовать диаграммы для вывода в поля HTML 1С, то в параметр ПолныйHTML (есть у любого метода диаграммы) нужно передавать Ложь. При этом, вместо текстового документа будет возвращаться строка, причем она будет содержать только скрипт формирования и контейнер - структуры документа с тегами HTML, Body, Head там не будет и готовую диаграмму можно передать, например, на сайт по Ajax.

При использовании стандартного варианта, возвращаемый текстовый документ будет содержать все атрибуты полного HTML документа. После его записи на диск, в реквизит поля HTML помещается путь к файлу

//Вызов с клиента для вывода на форму

  &НаКлиенте
  Процедура ВывестиДиаграммуОбластей(Команда)
  	
  	ТекстДок = ToastUI.ДиаграммаОбластей(ВводныеКатегории, ВводныеСерии);
  	ИВФ      = ПолучитьИмяВременногоФайла("html");
  	
  	Оповещение = Новый ОписаниеОповещения("ПослеЗаписиHTML", ЭтотОбъект, ИВФ);
  	ТекстДок.НачатьЗапись(Оповещение, ИВФ);
  	
  КонецПроцедуры

  &НаКлиенте
  Процедура ПослеЗаписиHTML(Результат, ДополнительныеПараметры) Экспорт
  	РеквизитПоляHTML = ДополнительныеПараметры;
  КонецПроцедуры

Кастомизация диаграмм

Диаграммы ToastUI имеют широкие возможности кастомизации. Для простоты и наглядности в библиотеке присутствует определение стандартных настроек внешнего вида, которые можно изменить

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

Доступные диаграммы:

Диаграмма областей

 _HTML = ToastUI.ДиаграммаОбластей(ВводныеКатегории(), ВводныеСерии());

  Функция ВводныеКатегории()
  	
  	МассивКатегорий = Новый Массив;
  	МассивКатегорий.Добавить("Пн");
  	МассивКатегорий.Добавить("Вт");
  	МассивКатегорий.Добавить("Ср");
  	МассивКатегорий.Добавить("Чт");
  	МассивКатегорий.Добавить("Пт");
  	МассивКатегорий.Добавить("Сб");
  	МассивКатегорий.Добавить("Вс");
  	
  	Возврат МассивКатегорий;
  	
  КонецФункции

  Функция ВводныеСерии()
  	
  	СоответствиеСерий  = Новый Соответствие;
  	
  	МассивПоказателей = Новый Массив;
  	МассивПоказателей.Добавить(10);
  	МассивПоказателей.Добавить(20);
  	МассивПоказателей.Добавить(50);
  	МассивПоказателей.Добавить(30);
  	МассивПоказателей.Добавить(45);
  	МассивПоказателей.Добавить(15);
  	МассивПоказателей.Добавить(70);
  	
  	СоответствиеСерий.Вставить("Олег", МассивПоказателей); 
  	
  	МассивПоказателей = Новый Массив;
  	МассивПоказателей.Добавить(40);
  	МассивПоказателей.Добавить(20);
  	МассивПоказателей.Добавить(70);
  	МассивПоказателей.Добавить(10);
  	МассивПоказателей.Добавить(15);
  	МассивПоказателей.Добавить(50);
  	МассивПоказателей.Добавить(35);
  	
  	СоответствиеСерий.Вставить("Сергей", МассивПоказателей); 
  	
  	МассивПоказателей = Новый Массив;
  	МассивПоказателей.Добавить(20);
  	МассивПоказателей.Добавить(40);
  	МассивПоказателей.Добавить(35);
  	МассивПоказателей.Добавить(15);
  	МассивПоказателей.Добавить(50);
  	МассивПоказателей.Добавить(10);
  	МассивПоказателей.Добавить(20);
  	
  	СоответствиеСерий.Вставить("Артем", МассивПоказателей); 
  
  	Возврат СоответствиеСерий;
  	
  КонецФункции

Гистограмма

_HTML = ToastUI.Гистограмма(ВводныеКатегории(), ВводныеСерии());

Функция ВводныеКатегории()
	
	МассивКатегорий = Новый Массив;
	МассивКатегорий.Добавить("Пн");
	МассивКатегорий.Добавить("Вт");
	МассивКатегорий.Добавить("Ср");
	МассивКатегорий.Добавить("Чт");
	МассивКатегорий.Добавить("Пт");
	МассивКатегорий.Добавить("Сб");
	МассивКатегорий.Добавить("Вс");
	
	Возврат МассивКатегорий;
	
КонецФункции

Функция ВводныеСерии()
	
	СоответствиеСерий  = Новый Соответствие;
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(30);
	МассивПоказателей.Добавить(45);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(70);
	
	СоответствиеСерий.Вставить("Олег", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(40);
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(70);
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(35);
	
	СоответствиеСерий.Вставить("Сергей", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(40);
	МассивПоказателей.Добавить(35);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(20);
	
	СоответствиеСерий.Вставить("Артем", МассивПоказателей); 

	Возврат СоответствиеСерий;
	
КонецФункции

"Ящик с усами" (диаграмма размаха)

_HTML = ToastUI.ЯщикСУсами(ВводныеКатегорииЯщика(), ВводныеСерииЯщика(), ВводныеВылеты());

Функция ВводныеСерииЯщика()
	
	СоответствиеСерий  = Новый Соответствие;	
	МассивЯщика        = Новый Массив;
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(100);
	МассивПоказателей.Добавить(200);
	МассивПоказателей.Добавить(5000);
	МассивПоказателей.Добавить(3000);
	МассивЯщика.Добавить(МассивПоказателей);
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(300);
	МассивПоказателей.Добавить(450);
	МассивПоказателей.Добавить(1500);
	МассивПоказателей.Добавить(5000);
	МассивЯщика.Добавить(МассивПоказателей);
	
	СоответствиеСерий.Вставить("Олег", МассивЯщика); 
	
	МассивЯщика       = Новый Массив;

	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(400);
	МассивПоказателей.Добавить(200);
	МассивПоказателей.Добавить(7000);
	МассивПоказателей.Добавить(9000);
	МассивЯщика.Добавить(МассивПоказателей);
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(100);
	МассивПоказателей.Добавить(150);
	МассивПоказателей.Добавить(5000);
	МассивПоказателей.Добавить(2000);
	МассивЯщика.Добавить(МассивПоказателей);
	
	СоответствиеСерий.Вставить("Сергей", МассивЯщика); 
	
	МассивЯщика       = Новый Массив;
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(200);
	МассивПоказателей.Добавить(400);
	МассивПоказателей.Добавить(3500);
	МассивПоказателей.Добавить(4000);
	МассивЯщика.Добавить(МассивПоказателей);
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(150);
	МассивПоказателей.Добавить(500);
	МассивПоказателей.Добавить(1000);
	МассивПоказателей.Добавить(8000);
	МассивЯщика.Добавить(МассивПоказателей);
	
	СоответствиеСерий.Вставить("Артем", МассивЯщика); 

	Возврат СоответствиеСерий;
	
КонецФункции

Функция ВводныеКатегорииЯщика()
	
	МассивКатегорий = Новый Массив;
	МассивКатегорий.Добавить("Первая половина");
	МассивКатегорий.Добавить("Вторая половина");
	
	Возврат МассивКатегорий;
	
КонецФункции
  
Функция ВводныеВылеты()
	
	СоответствиеВылетов  = Новый Соответствие;
	МассивЯщика          = Новый Массив;
	МассивПоказателей    = Новый Массив;
	
	МассивПоказателей.Добавить(1);
	МассивПоказателей.Добавить(14000);
	МассивЯщика.Добавить(МассивПоказателей);
	
	СоответствиеВылетов.Вставить("Олег", МассивЯщика); 
	
	Возврат СоответствиеВылетов;
	
КонецФункции

Пузырьковая диаграмма

_HTML = ToastUI.ПузырьковаяДиаграмма(ВводныеСерииПузырьковойДиаграммы());

Функция ВводныеСерииПузырьковойДиаграммы()
	
	СоответствиеСерий  = Новый Соответствие;
	
	МассивПоказателей = Новый Массив;
	
	ЭлементДиаграммы = ToastUI.КонструкторЭлементаПузырьковойДиаграммы(10, 20, 50, "Яблоко");
	МассивПоказателей.Добавить(ЭлементДиаграммы);
	
	ЭлементДиаграммы = ToastUI.КонструкторЭлементаПузырьковойДиаграммы(50, 60, 20, "Груша");
	МассивПоказателей.Добавить(ЭлементДиаграммы);

	СоответствиеСерий.Вставить("Олег", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	
	ЭлементДиаграммы = ToastUI.КонструкторЭлементаПузырьковойДиаграммы(100, 30, 40, "Слива");
	МассивПоказателей.Добавить(ЭлементДиаграммы);
	
	ЭлементДиаграммы = ToastUI.КонструкторЭлементаПузырьковойДиаграммы(20, 80, 30, "Апельсин");
	МассивПоказателей.Добавить(ЭлементДиаграммы);

	
	СоответствиеСерий.Вставить("Сергей", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	
	ЭлементДиаграммы = ToastUI.КонструкторЭлементаПузырьковойДиаграммы(120, 130, 40, "Мандарин");
	МассивПоказателей.Добавить(ЭлементДиаграммы);
	
	ЭлементДиаграммы = ToastUI.КонструкторЭлементаПузырьковойДиаграммы(80, 70, 30, "Киви");
	МассивПоказателей.Добавить(ЭлементДиаграммы);
	
	ЭлементДиаграммы = ToastUI.КонструкторЭлементаПузырьковойДиаграммы(40, 40, 10, "Банан");
	МассивПоказателей.Добавить(ЭлементДиаграммы);

	СоответствиеСерий.Вставить("Артем", МассивПоказателей); 

	Возврат СоответствиеСерий;
	
КонецФункции

Столбчатая диаграмма

_HTML = ToastUI.СтолбчатаяДиаграмма(ВводныеКатегории(), ВводныеСерии());

Функция ВводныеКатегории()
	
	МассивКатегорий = Новый Массив;
	МассивКатегорий.Добавить("Пн");
	МассивКатегорий.Добавить("Вт");
	МассивКатегорий.Добавить("Ср");
	МассивКатегорий.Добавить("Чт");
	МассивКатегорий.Добавить("Пт");
	МассивКатегорий.Добавить("Сб");
	МассивКатегорий.Добавить("Вс");
	
	Возврат МассивКатегорий;
	
КонецФункции

Функция ВводныеСерии()
	
	СоответствиеСерий  = Новый Соответствие;
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(30);
	МассивПоказателей.Добавить(45);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(70);
	
	СоответствиеСерий.Вставить("Олег", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(40);
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(70);
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(35);
	
	СоответствиеСерий.Вставить("Сергей", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(40);
	МассивПоказателей.Добавить(35);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(20);
	
	СоответствиеСерий.Вставить("Артем", МассивПоказателей); 

	Возврат СоответствиеСерий;
	
КонецФункции

Столбчато-линейная диаграмма

_HTML = ToastUI.СтолбчатоЛинейнаяДиаграмма(ВводныеКатегории(), ВводныеСерии(), ВводныеЛинии());

Функция ВводныеКатегории()
	
	МассивКатегорий = Новый Массив;
	МассивКатегорий.Добавить("Пн");
	МассивКатегорий.Добавить("Вт");
	МассивКатегорий.Добавить("Ср");
	МассивКатегорий.Добавить("Чт");
	МассивКатегорий.Добавить("Пт");
	МассивКатегорий.Добавить("Сб");
	МассивКатегорий.Добавить("Вс");
	
	Возврат МассивКатегорий;
	
КонецФункции

Функция ВводныеСерии()
	
	СоответствиеСерий  = Новый Соответствие;
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(30);
	МассивПоказателей.Добавить(45);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(70);
	
	СоответствиеСерий.Вставить("Олег", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(40);
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(70);
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(35);
	
	СоответствиеСерий.Вставить("Сергей", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(40);
	МассивПоказателей.Добавить(35);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(20);
	
	СоответствиеСерий.Вставить("Артем", МассивПоказателей); 

	Возврат СоответствиеСерий;
	
КонецФункции

Функция ВводныеЛинии()
	
	СоответствиеЛиний  = Новый Соответствие;
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(30);
	МассивПоказателей.Добавить(40);
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(30);
	МассивПоказателей.Добавить(45);
	МассивПоказателей.Добавить(55);
	МассивПоказателей.Добавить(50);
	
	СоответствиеЛиний.Вставить("Обычная", МассивПоказателей); 
		
	Возврат СоответствиеЛиний;
	
КонецФункции

Спидометр

_HTML = ToastUI.Спидометр(ВводныеСерииСОднимЗначениемВМассиве());

Функция ВводныеСерииСОднимЗначениемВМассиве()
	
	СоответствиеСерий  = Новый Соответствие;
	
	Значение = Новый Массив;
	Значение.Добавить(10);
	СоответствиеСерий.Вставить("Олег", Значение); 
	
	Значение = Новый Массив;
	Значение.Добавить(20);
	СоответствиеСерий.Вставить("Сергей", Значение);
	
	Значение = Новый Массив;
	Значение.Добавить(40);
	СоответствиеСерий.Вставить("Артем", Значение); 

	Возврат СоответствиеСерий;
	
КонецФункции

Линейная диаграмма

_HTML = ToastUI.ЛинейнаяДиаграмма(ВводныеКатегории(), ВводныеСерии());

Функция ВводныеКатегории()
	
	МассивКатегорий = Новый Массив;
	МассивКатегорий.Добавить("Пн");
	МассивКатегорий.Добавить("Вт");
	МассивКатегорий.Добавить("Ср");
	МассивКатегорий.Добавить("Чт");
	МассивКатегорий.Добавить("Пт");
	МассивКатегорий.Добавить("Сб");
	МассивКатегорий.Добавить("Вс");
	
	Возврат МассивКатегорий;
	
КонецФункции

Функция ВводныеСерии()
	
	СоответствиеСерий  = Новый Соответствие;
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(30);
	МассивПоказателей.Добавить(45);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(70);
	
	СоответствиеСерий.Вставить("Олег", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(40);
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(70);
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(35);
	
	СоответствиеСерий.Вставить("Сергей", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(40);
	МассивПоказателей.Добавить(35);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(20);
	
	СоответствиеСерий.Вставить("Артем", МассивПоказателей); 

	Возврат СоответствиеСерий;
	
КонецФункции

Круговая диаграмма

_HTML = ToastUI.КруговаяДиаграмма(ВводныеСерииСОднимЗначением());

Функция ВводныеСерииСОднимЗначением()
	
	СоответствиеСерий  = Новый Соответствие;
	
	СоответствиеСерий.Вставить("Олег", 10); 	
	СоответствиеСерий.Вставить("Сергей", 20); 
	СоответствиеСерий.Вставить("Артем", 40); 

	Возврат СоответствиеСерий;
	
КонецФункции

Вложенная круговая диаграмма

_HTML = ToastUI.ВложеннаяКруговаяДиаграмма(ВводныеСерииКруговойДиаграммы());

Функция ВводныеСерииКруговойДиаграммы()
	
	СоответствиеСерий  = Новый Соответствие;
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаКруговойДиаграммы("Фрукты",170));
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаКруговойДиаграммы("Овощи",210));
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаКруговойДиаграммы("Ягоды",430));

	
	СоответствиеСерий.Вставить("Все", МассивПоказателей);

	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаКруговойДиаграммы("Яблоко",30));
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаКруговойДиаграммы("Слива",50));
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаКруговойДиаграммы("Груша",70));
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаКруговойДиаграммы("Киви",40));
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаКруговойДиаграммы("Апельсин",30));
	
	СоответствиеСерий.Вставить("Олег", МассивПоказателей); 
	
	Возврат СоответствиеСерий;
	
КонецФункции

Радар

_HTML = ToastUI.Радар(ВводныеКатегории(), ВводныеСерии());

Функция ВводныеКатегории()
	
	МассивКатегорий = Новый Массив;
	МассивКатегорий.Добавить("Пн");
	МассивКатегорий.Добавить("Вт");
	МассивКатегорий.Добавить("Ср");
	МассивКатегорий.Добавить("Чт");
	МассивКатегорий.Добавить("Пт");
	МассивКатегорий.Добавить("Сб");
	МассивКатегорий.Добавить("Вс");
	
	Возврат МассивКатегорий;
	
КонецФункции

Функция ВводныеСерии()
	
	СоответствиеСерий  = Новый Соответствие;
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(30);
	МассивПоказателей.Добавить(45);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(70);
	
	СоответствиеСерий.Вставить("Олег", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(40);
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(70);
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(35);
	
	СоответствиеСерий.Вставить("Сергей", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(40);
	МассивПоказателей.Добавить(35);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(20);
	
	СоответствиеСерий.Вставить("Артем", МассивПоказателей); 

	Возврат СоответствиеСерий;
	
КонецФункции

Радиальная диаграмма

_HTML = ToastUI.РадиальнаяДиаграмма(ВводныеКатегории(), ВводныеСерии());

Функция ВводныеКатегории()
	
	МассивКатегорий = Новый Массив;
	МассивКатегорий.Добавить("Пн");
	МассивКатегорий.Добавить("Вт");
	МассивКатегорий.Добавить("Ср");
	МассивКатегорий.Добавить("Чт");
	МассивКатегорий.Добавить("Пт");
	МассивКатегорий.Добавить("Сб");
	МассивКатегорий.Добавить("Вс");
	
	Возврат МассивКатегорий;
	
КонецФункции

Функция ВводныеСерии()
	
	СоответствиеСерий  = Новый Соответствие;
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(30);
	МассивПоказателей.Добавить(45);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(70);
	
	СоответствиеСерий.Вставить("Олег", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(40);
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(70);
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(35);
	
	СоответствиеСерий.Вставить("Сергей", МассивПоказателей); 
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(20);
	МассивПоказателей.Добавить(40);
	МассивПоказателей.Добавить(35);
	МассивПоказателей.Добавить(15);
	МассивПоказателей.Добавить(50);
	МассивПоказателей.Добавить(10);
	МассивПоказателей.Добавить(20);
	
	СоответствиеСерий.Вставить("Артем", МассивПоказателей); 

	Возврат СоответствиеСерий;
	
КонецФункции

Диаграмма разброса

_HTML = ToastUI.ДиаграммаРазброса(ВводныеСерииРазброса());

Функция ВводныеСерииРазброса()
	
	СоответствиеСерий  = Новый Соответствие;
	
	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаРазброса(20,170));
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаРазброса(50,210));
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаРазброса(70,430));

	
	СоответствиеСерий.Вставить("Все", МассивПоказателей);

	МассивПоказателей = Новый Массив;
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаРазброса(40,30));
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаРазброса(110,50));
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаРазброса(20,70));
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаРазброса(40,40));
	МассивПоказателей.Добавить(ToastUI.КонструкторЭлементаРазброса(90,30));
	
	СоответствиеСерий.Вставить("Олег", МассивПоказателей); 
	
	Возврат СоответствиеСерий;
	
КонецФункции

Репозиторий:

https://github.com/Bayselonarrend/1Charts

Не забудьте поставить + ;) Спасибо за внимание!

Основано на библиотеке ToastUI Charts
MIT License
https://github.com/nhn/tui.chart?tab=MIT-1-ov-file#readme
Copyright (c) 2020 NHN Cloud Corp.

 

 Мой GitHub:     https://gitub.com/Bayselonarrend 
 Лицензия MIT:   https://mit-license.org

web js диаграммы графики визуализация html

+68 –

См. также

Веб-портал "Service Desk Online" для конфигураций 1С:ITIL, 1С:ITILIUM, Управление IT-отделом 8

WEB-интеграция Администрирование веб-серверов Платные (руб)

Веб-портал обеспечивает удобный доступ к конфигурации 1С:ITIL, 1С:ITILIUM, Управление IT-отделом 8 через интернет с любого устройства посредством браузера, увеличивая эффективность работы пользователей и снижая нагрузку на сервер. Быстрая инсталляция портала за пару часов, удобный и интуитивно понятный интерфейс и безопасность данных помогут упростить работу с порталом и ускорить выполнение бизнес-процессов компании.

128000 руб.

19.12.2023 2205 2 0

Amocrm: интеграция с 1С

WEB-интеграция Анализ продаж Системный администратор Программист Пользователь Платформа 1С v8.3 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Управленческий учет Платные (руб)

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

60000 руб.

07.05.2019 34242 64 45

Веб-портал "Онлайн-заказ" для 1С

Оптовая торговля Розничная торговля WEB-интеграция 1С:Управление торговлей 10 1С:Управление производственным предприятием 1С:Управление нашей фирмой 1.6 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 Платные (руб)

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

57600 руб.

26.11.2024 1952 1 1

Интеграция Альфа Авто 5 / Альфа Авто 6 и AUTOCRM / Инфотек

Сайты и интернет-магазины WEB-интеграция Системный администратор Программист Пользователь Платформа 1С v8.3 1C:Бухгалтерия 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме.

36000 руб.

03.08.2020 18813 21 22

Конструктор API для обмена базы 1С 8.3 с другими системами по протоколу http в формате JSON

WEB-интеграция Программист Руководитель проекта Платформа 1С v8.3 1C:Бухгалтерия 1С:Франчайзи, автоматизация бизнеса Платные (руб)

Расширение значительно упрощает написание API на 1С. Веб программисты получают простой и понятный доступ к 1С. Описание API создаётся автоматически и представляется в виде удобном как для человека, так и для программной обработки.

24000 руб.

27.09.2024 3438 3 2

Интеграция с сервисом vetmanager в 1С: Бухгалтерия 3.0

WEB-интеграция Программист Платформа 1С v8.3 Бухгалтерский учет 1С:Бухгалтерия 3.0 Бытовые услуги, сервис Платные (руб)

Внешняя обработка разрабатывалась для загрузки документов из Ветменеджер в 1С: Бухгалтерия 3.0

12000 руб.

02.02.2021 18547 53 50

Все службы доставки в Вашей 1С! Без изменения конфигурации! 1С:УТ, 1С:ERP, 1С:КА, 1С:УНФ

WEB-интеграция Рабочее место Оптовая торговля Розничная торговля Логистика, склад и ТМЦ Программист Пользователь Платформа 1С v8.3 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 Россия Управленческий учет Платные (руб)

40+ служб доставки для 1С в одном модуле! Внешняя обработка, которая НЕ изменяет Вашу конфигурацию! Подписная модель на 1 год.

16800 руб.

22.03.2017 39806 19 50

Интеграция 1С с API СДЭК, Деловые Линии, ПЭК, Boxberry, Почта России и др. Управление доставками в 1С 8.3

WEB-интеграция Рабочее место Оптовая торговля Розничная торговля Логистика, склад и ТМЦ Пользователь Платформа 1С v8.3 1С:Бухгалтерия 2.0 1С:Управление торговлей 10 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Оптовая торговля, дистрибуция, логистика Россия Управленческий учет Платные (руб)

Программный продукт "Управление доставками в 1С" позволяет обмениваться с личным кабинетом СДЭК, Деловые Линии, ПЭК, DPD, Почта России и другими транспортных компаниями. Упрощает создание заявок и резервирование заказов прямо в интерфейсе 1С

18000 руб.

10.03.2016 64364 308 98

Комментарии

Подписаться на ответы Инфостарт бот

Свернуть все

1. aleksey2 89 21.12.23 11:15 Сейчас в теме

биржевой график есть ?

2. bayselonarrend 2481 21.12.23 11:21 Сейчас в теме

(1) Со свечами? Нет, нету. Есть только те, которые перечислены

9. John_d 5972 22.12.23 10:53 Сейчас в теме

(1) Свечной график есть в amCharts
https://www.amcharts.com/demos/
https://infostart.ru/1c/tools/1362537/

3. Diversus 2331 21.12.23 11:33 Сейчас в теме

Красиво. Проверяли работу на Linux?

4. bayselonarrend 2481 21.12.23 11:48 Сейчас в теме

(3) Спасибо. Нет, не проверял, но на Linux WebKit в формах HTML уже давно, думаю проблем никаких быть не должно

5. Diversus 2331 21.12.23 12:45 Сейчас в теме

(4) Это не верно. Сейчас в Linux WebKit "ниже" чем в Windows и из-за этого могут быть проблемы.
Мы сталкивались с этим, когда на Windows HTML отображается нормально, а в Linux нет.

6. bayselonarrend 2481 21.12.23 12:53 Сейчас в теме

(5)Ну, в любом случае, я не пробовал - нет машины под рукой. Диаграммы рисуются через canvas

25. Трактор 1265 09.05.24 23:10 Сейчас в теме

(3) Проверил под Убунту 23.10. Не работает в тонком и толстом клиентах. 1С 8.3.24.1342

26. Трактор 1265 11.05.24 11:31 Сейчас в теме

(25) Вру! Я не смог проверить под линуксом. Оказывается веб сервис отъедает лицензию, а у меня под линуксом однопользовательская лицензия.

27. Трактор 1265 13.05.24 10:17 Сейчас в теме

(26) проверил 1С 8.3.24.1342 не отображает эти графики ни в толстом, ни в тонком клиенте. ОС Ubuntu 23.10.

28. пользователь 05.06.24 13:57

Сообщение было скрыто модератором.

...

7. kumga99 26 22.12.23 08:39 Сейчас в теме

Круто сделана!

8. BackinSoda 22.12.23 09:38 Сейчас в теме

Сделано красиво. Интересно, в чём преимущество использования html5-диаграмм от типовых ?

10. John_d 5972 22.12.23 11:05 Сейчас в теме

(8) все диаграммы в 1с разработаны на заре появления 8.0 (20 лет назад) и с тех пор почти не менялись.
В типовых конфигурациях диаграммы не используются.
Средствами 1с можно сделать и нормально пользоваться только самые простые диаграммы (типа круговой и столбиков).
В комментарии выше я скинул ссылку на диаграммы amCharts (5 версия которой вышла 2 года назад)

16. BackinSoda 24.12.23 01:24 Сейчас в теме

(10) Под типовыми я имел в виду обычные диаграммы в 1с, например как в демо диаграммах

11. Slypower 3 22.12.23 14:27 Сейчас в теме

Знать бы. какая платформа нужна и зависит ли от режима совместимости

12. bayselonarrend 2481 22.12.23 14:56 Сейчас в теме

(11)Я писал на режиме совместимости 8.3.6, но не факт, что заработает на настоящей 8.3.6 - я просто не помню, когда IE заменили на WebKit

13. Slypower 3 22.12.23 15:20 Сейчас в теме

Не нашел в примерах. Есть возможность на одной диаграмме вывести 2 разных показателя?

14. bayselonarrend 2481 22.12.23 16:15 Сейчас в теме

(13)Например?

17. Slypower 3 26.12.23 09:18 Сейчас в теме

(14) пример такой диаграммы

Прикрепленные файлы:

18. bayselonarrend 2481 26.12.23 10:06 Сейчас в теме

(17)Столбчато-линейная это не оно?

19. Slypower 3 26.12.23 10:14 Сейчас в теме

(18) Здесь 2 диаграммы, 2 разных показателя, шкалы слева Реализация и справа Объем

20. starik-2005 3144 26.12.23 13:38 Сейчас в теме

(19) Оно?

22. Slypower 3 26.12.23 13:58 Сейчас в теме

(20) нет, не оно

21. bayselonarrend 2481 26.12.23 13:45 Сейчас в теме

(19)Вообще toast ui вроде позволяет выводить вторую шкалу, но здесь я это не реализовывал

15. s_vidyakin 68 22.12.23 16:53 Сейчас в теме

ностальгия прям. Делал то же самое лет 10 назад на highcharts.js

23. Трактор 1265 16.02.24 23:51 Сейчас в теме

В макете диаграмм ошибка.

В файле https://github.com/Bayselonarrend/1Charts/blob/main/ToastUI.bsl в строке 180

Сказано: | const options = '%2';
Правильно так: | const options = %2;

Из-за этой ошибки не работают настройки.

24. bayselonarrend 2481 22.02.24 17:03 Сейчас в теме

(23)Спасибо, исправил

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

E-mail:

Автор:

Антон Титовец (bayselonarrend)

Рейтинг: 2481

Для получения уведомлений о новых публикациях автора подключите телеграм бот: Инфостарт бот

Публикация:

№ 2003116

Создание 21.12.23 10:00

Обновление 21.12.23 10:00

Статистика:

Просмотры 5379

Загрузки 0

Рейтинг 68

Комментарии 27

Характеристики:

Код открыт Да

Рубрики WEB-интеграция Работа с интерфейсом

Кому Программист

Тип файла Нет файла

Платформа Платформа 1С v8.3

Конфигурация Универсальные

Операционная система Не имеет значения

Страна Не имеет значения

Отрасль Не имеет значения

Налоги Не имеет значения

Вид учета Не имеет значения

Доступ к файлу Бесплатно (free)