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 –

Вы можете заказать платную адаптацию этой статьи под ваши задачи на «Бирже заказов».

0% комиссии — оплата напрямую исполнителю;
Исполнители любого масштаба — от отдельных специалистов до команд под проект;
Прямой обмен контактами между заказчиком и исполнителем;
Безопасная сделка — при необходимости;
Рейтинги, кейсы и прозрачная система откликов.

См. также

Infostart Dashboard: Монитор показателей, виджеты и дашборды в 1С 8.3

Работа с интерфейсом Анализ учета Мониторинг 1С:Предприятие 8 1С 8.3 1C:Бухгалтерия 1С:Бухгалтерия 3.0 1С:ERP Управление предприятием 2 1С:Управление холдингом 1С:Зарплата и Управление Персоналом 3.x 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 1С:Управление торговлей 11 Платные (руб)

Создайте свой функциональный интерфейс в любой конфигурации 1С с помощью расширения Infostart Dashboard. Настраивайте панели виджетов с метриками, индикаторами и показателями на начальном экране. Узнайте возможность внедрения подсистемы у себя в конфигурации с помощью бесплатной обработки "Анализ внедрения подсистемы 1С Infostart Dashboard"!

31720 руб.

27.03.2025 84747 60 42

Интеграция 1С с API Boxberry, СДЭК, Энергия, Почта России, DPD, ПЭК, Grastin, Деловые Линии, КСЕ, Dalli, ЯндексДоставка

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

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

24400 руб.

10.03.2016 72759 315 100

Экспортер — автоматизация выгрузки данных из 1С в Spot2D

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

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

17568 руб.

20.12.2024 6397 28 4

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

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

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

42700 руб.

03.08.2020 24421 37 26

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

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

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

6914 руб.

17.11.2015 132781 466 143

253

Интеграция Vetmanager с 1С: автоматизация учета для ветеринарных клиник. Синхронизация документов, справочников и оплат через API

WEB-интеграция Программист 1С:Предприятие 8 1С:Бухгалтерия 3.0 Бытовые услуги, сервис Платные (руб)

Расширение для автоматизации передачи данных между сервисом Vetmanager с 1С: Бухгалтерия 3.0. Решение позволяет загружать документы и справочники из Ветменеджер в 1С:Бухгалтерию, сокращая время на ручной ввод данных и минимизируя ошибки.

24000 руб.

02.02.2021 23151 69 52

Выгрузка товаров в VK маркет из 1С

WEB-интеграция Загрузка и выгрузка в Excel Программист Пользователь 1С:Предприятие 8 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Розница 3.0 Розничная и сетевая торговля (FMCG) Россия Платные (руб)

Расширение освободит вас от необходимости вручную обновлять информацию о товарах в группах ВКонтакте. Достаточно задать правила один раз, и система автоматически формирует файлы yml для дальнейшей загрузки в группы в ВК. Вы сможете легко выбирать, какие товары публиковать, создавая гибкие критерии отбора. Например, можно добавить важные для покупателей параметры: цвет, размер или другие характеристики.

12200 руб.

29.08.2025 2873 7 8

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

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

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

6100 руб.

30.01.2019 27995 103 6

Комментарии

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

Свернуть все

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(19) Оно?

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

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

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

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

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

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

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

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

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

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

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

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

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

Для отправки сообщения требуется регистрация/авторизация

Автор:

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

Рейтинг: 3168

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

Вы можете заказать платную консультацию или разработку у автора. Будет создан приватный заказ на «Бирже заказов» для автора.

Публикация:

№ 2003116

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

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

Статистика:

Просмотры 7934

Загрузки 0

Рейтинг 68

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

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

Код открыт Да

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

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

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

Платформа 1С:Предприятие 8

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

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

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

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

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

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

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

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

1Charts

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

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

См. также

Журнал

База знаний

Лаборатория

Анализ & Управление

Сопровождение 1С

Корпоративные решения

Обучение

Маркетплейс

Проектный офис

Мероприятия

Видеозаписи

Биржа заказов

Форум

Мерч

О компании