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 –

См. также

Интеграция системы Datamart завода Москвич и Альфа-Авто, редакции 5 и 6

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

Обмен данными Datamart завода Москвич и автодилера на Альфа-Авто, ред.5 и 6

240000 руб.

01.08.2023 2555 2 0

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

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

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

36000 руб.

03.08.2020 17780 19 22

Интеграция 1С с OpenCart 2.x, 3x — модуль обмена данными

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

Модуль интеграции 1С с OpenCart 2.x, 3x позволяет обмениваться данными между OpenCart (самая популярная бесплатная cms для интернет-магазинов) и 1С:Предприятие 8.

6800 руб.

17.11.2015 120240 379 139

224

Интеграция 1С и Битрикс 24 — модуль синхронизации для обмена задачами

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

Интеграция 1С и Битрикс 24. Разработка имеет двухстороннюю синхронизацию 1С и Bitrix24 задачами. Решение позволяет создавать пользователя в 1С из Битрикс24 и наоборот. Данная разработка технически подходит под все основные конфигурации линейки продуктов 1С:Предприятие 8.3 (платформа начиная с 8.3.23). При приобретении предоставляется 1 месяц бесплатных обновлений разработки. Доступна демо-версия продукта с подключением Вашего Битрикс24

5040 руб.

04.05.2021 19844 13 17

Сервисы 1СПАРК Риски и 1С:Контрагент для «старых» конфигураций

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

Доступ к сервисам 1СПАРК Риски и 1С:Контрагент в «старых», но широко используемых конфигурациях.

6000 руб.

30.01.2019 25019 47 5

SALE! 15%

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

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

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

~~16800~~ 14280 руб.

22.03.2017 38744 18 49

Модуль для обмена "1С:Предприятие 8. УАТ. ПРОФ" с FortMonitor

WEB-интеграция 8.3.8 Конфигурации 1cv8 Автомобили, автосервисы Беларусь Украина Россия Казахстан Управленческий учет Платные (руб)

Расширение предназначено для конфигурации "1С:Предприятие 8. Управление Автотранспортом. ПРОФ". Функционал модуля: 1. Заполнение регистров сведений по подсистеме "Мониторинг", а именно: события по мониторингу, координаты по мониторингу, пробег и расход по мониторингу, текущее местоположение ТС по мониторингу 2. Заполнение путевого листа: пробег по мониторингу, время выезда/заезда, табличная часть ГСМ, места стоянок по геозонам. 3. Отчеты по данным загруженным в регистры сведений. 4. Предусмотрена автоматическая загрузка данных в фоновом режиме (условия работы данной загрузке читайте в описании товара) Модуль работает без включенной константы по настройкам мониторинга. Модуль формы предоставляется с открытым кодом, общий модуль защищен. Любой заинтересованный пользователь, имеет возможность скачать демо-версию расширения.

22656 руб.

25.05.2021 14421 42 8

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

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

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

24000 руб.

27.09.2024 1168 1 0

Комментарии

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

Свернуть все

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

27. Трактор 1254 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 5891 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 2087 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 2087 22.12.23 16:15 Сейчас в теме

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

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

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

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

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

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

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

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

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

(19) Оно?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

E-mail:

Автор:

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

Рейтинг: 2087

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

Публикация:

№ 2003116

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

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

Статистика:

Просмотры 4950

Загрузки 0

Рейтинг 68

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

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

Код открыт Да

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

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

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

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

Конфигурация Не имеет значения

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

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

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

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

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

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