Красивые графики. Пошаговая инструкция (Highstock)

22.11.17

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

Данный подход опробован на библиотеках: Нighcharts и Highstock. Для работы будет необходима 1С и браузер Google Chrome. Чукча не писатель (первая публикация).

1) Скачиваем необходимую библиотеку https://www.highcharts.com/download

2) Открываем:

3) Ищем подходящий график (выбрал Spline):

 4) Для примера:

5) Правый клик. Открываем исходный код:

6) Копируем код страницы в шаблон:

7) Ищем дополнительные файлы (сразу за заголовком):

8) Указываем пути в нашу библиотеку:

9) Указываем нужные заголовки диаграммы:

10) Открываем отладчик кода:

11) Ставим точку останова там, где передаются данные (клик по номеру строки):

12) Обновляем страницу и смотрим формат массива «data»:

Тут всё просто. Массив состоит из массива массивов, в нижнем уровне два элемента: «Дата» и «Цена»

13) Для примера я взял данные курса доллара США по курсу ЦБ:

14) В макете ставим «метку» куда будем вставлять необходимые данные:

Было:

Стало:

15) Собираем данные и заполняем макет:

////Собираем данные для отображения графика в формате "[ [1290556800000,44.97],[1290556900000,44.98]......]
ДанныеДляГрафика = "[";
Для Каждого СтрокаКурса Из ТиблицаКурс Цикл
   ДанныеДляГрафика = ДанныеДляГрафика + "[" + Строка(Формат(СтрокаКурса.Дата - дата(1970,1,1,1,0,0) + 3600,"ЧГ=0")) + "000," + Строка(Формат(СтрокаКурса.Курс,"ЧРД=.; ЧГ=0")) + "]" + ",";			
КонецЦикла;
ДанныеДляГрафика = Лев(ДанныеДляГрафика,СтрДлина(ДанныеДляГрафика)-1) + "]";
		
		
////Заполняем макет
Макет = ЭтотОбъект.ПолучитьМакет("МакетГрафика");
Текст = Макет.ПолучитьТекст();
Текст = СтрЗаменить(Текст,"~ДанныеДляГрафика~",ДанныеДляГрафика);

16) Записываем в файл и открываем в браузере (как вариант можно вывести в поле HTML):

файлОтчёта = Новый ТекстовыйДокумент;
файлОтчёта.УстановитьТекст(Текст); 
ИмяФайлаОтчета = "C:\Users\KlyavlinFN\Desktop\Highstock\test.html";
файлОтчёта.Записать(ИмяФайлаОтчета);
ЗапуститьПриложение(ИмяФайлаОтчета);

17) Готовый результат:

См. также

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

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

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

6000 руб.

16.01.2015    61793    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

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

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    54398    16    21    

42

Управление дашбордами

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

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

2400 руб.

29.06.2020    16695    21    4    

35

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

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

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

27.12.2023    10734    750    elcoan    45    

106

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

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

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

2 стартмани

10.04.2023    9607    151    acces969    31    

118

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

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

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

1 стартмани

05.07.2022    3665    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12077    1    5    

10
Отзывы
3. Stepa86 1521 22.11.17 16:04 Сейчас в теме
1) Идем на https://www.highcharts.com/demo
Выбираем понравившийся график
Нажимаем на него
Внизу жмем кнопку "Едит ин джиэсфидле"
Экспериментируем с параметрами и данными

2) Идем на https://api.highcharts.com/highcharts/
кликаем, смотрим, читаем, переходим в примеры
Описание API тут короче.

3) Я тело функции собираю через JSON. Сперва накидываю все в структуру, потом формирую по нему json, потом подменяю

Процедура Инициализация() Экспорт

	Диаграмма = Новый Структура;
	
	_Свойство( "credits" ).Вставить( "enabled", Ложь );
	_Свойство( "exporting" ).Вставить( "enabled", Ложь );

КонецПроцедуры

Процедура УстановитьОсьX( Знач пДанные) Экспорт
	
	ось = _Свойство( "xAxis" );
	
	ось.Вставить( "crosshair", Истина );
	ось.Вставить( "categories", пДанные );
	ПолучитьСвойство( ось, "labels" ).Вставить("enabled", Ложь );
	
	ПолучитьСвойство( ось, "events" ).Вставить( "setExtremes", "__syncExtremes__" );
	
КонецПроцедуры

...

Функция Контейнер( Знач пИмяКонтейнера = "container") Экспорт
	
	Возврат "$('<div class=""chart"">')
	|        .appendTo('#" + пИмяКонтейнера + "')
	|        .highcharts( " + ПолучитьJSON() + ")
	|";
	
КонецФункции

Функция ПолучитьJSON()
	
	записьJSON = Новый ЗаписьJSON;
	записьJSON.УстановитьСтроку();
	
	ЗаписатьJSON( записьJSON, Диаграмма );
	
	строкаJSON = записьJSON.Закрыть();
	
	Для каждого цЭлемент Из Подмены() Цикл
		
		строкаJSON = СтрЗаменить( строкаJSON, цЭлемент.Ключ, цЭлемент.Значение );
		
	КонецЦикла;
	
	Возврат строкаJSON;
	
КонецФункции

Функция Подмены()

	подмены = Новый Соответствие;
	подмены.Вставить( """Null""", "null" );
	подмены.Вставить( """__positioner__right""", "function() { return { x: this.chart.chartWidth - this.label.width, y: 10 }; }" );
	подмены.Вставить( """__positioner__left""", "function() { return { x: 50, y: 10 }; }" );
	подмены.Вставить( """__syncExtremes__""", "syncExtremes" );
	
	Возврат подмены;

КонецФункции
Показать
user1778480; rpgshnik; cleaner_it; igorkosmos; DrAku1a; RabadanovAG; wunderland; CrackedBone; perpleks; dour-dead; 🅵🅾️🆇; Lem0n; Dracarys; ZSS2014; rhtr; Saint13; shalimski; TreeDogNight; kirillkr; kiruha; +20 Ответить
Остальные комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. kiruha 388 22.11.17 15:03 Сейчас в теме
Есть еще рисунки получаемых графиков ?
Алгоритм везде одинаковый ?
Как задается масштаб графика ?
2. Degrement 126 22.11.17 15:23 Сейчас в теме
Из того что делал:
1) Биржевые свечи.
2) Биржевые свечи + объём.
3) Несколько серий на одном графике.

Алгоритм "примерно" везде одинаковый:
Находим нужный график => открываем код в хроме => ищем где задаются данные => формируем данные на стороне 1С => передаём в шаблон выбранного графика(макета) => получаем нужный график.

Для нескольких серий на одном графике пришлось поплясать с бубном и часть взять из другого примера.

Что вы подразумеваете под масштабом графика?

В прикреплённом файле обработка по нескольким сериям.
Прикрепленные файлы:
График показатели.epf
user1778480; kiruha; +2 Ответить
3. Stepa86 1521 22.11.17 16:04 Сейчас в теме
1) Идем на https://www.highcharts.com/demo
Выбираем понравившийся график
Нажимаем на него
Внизу жмем кнопку "Едит ин джиэсфидле"
Экспериментируем с параметрами и данными

2) Идем на https://api.highcharts.com/highcharts/
кликаем, смотрим, читаем, переходим в примеры
Описание API тут короче.

3) Я тело функции собираю через JSON. Сперва накидываю все в структуру, потом формирую по нему json, потом подменяю

Процедура Инициализация() Экспорт

	Диаграмма = Новый Структура;
	
	_Свойство( "credits" ).Вставить( "enabled", Ложь );
	_Свойство( "exporting" ).Вставить( "enabled", Ложь );

КонецПроцедуры

Процедура УстановитьОсьX( Знач пДанные) Экспорт
	
	ось = _Свойство( "xAxis" );
	
	ось.Вставить( "crosshair", Истина );
	ось.Вставить( "categories", пДанные );
	ПолучитьСвойство( ось, "labels" ).Вставить("enabled", Ложь );
	
	ПолучитьСвойство( ось, "events" ).Вставить( "setExtremes", "__syncExtremes__" );
	
КонецПроцедуры

...

Функция Контейнер( Знач пИмяКонтейнера = "container") Экспорт
	
	Возврат "$('<div class=""chart"">')
	|        .appendTo('#" + пИмяКонтейнера + "')
	|        .highcharts( " + ПолучитьJSON() + ")
	|";
	
КонецФункции

Функция ПолучитьJSON()
	
	записьJSON = Новый ЗаписьJSON;
	записьJSON.УстановитьСтроку();
	
	ЗаписатьJSON( записьJSON, Диаграмма );
	
	строкаJSON = записьJSON.Закрыть();
	
	Для каждого цЭлемент Из Подмены() Цикл
		
		строкаJSON = СтрЗаменить( строкаJSON, цЭлемент.Ключ, цЭлемент.Значение );
		
	КонецЦикла;
	
	Возврат строкаJSON;
	
КонецФункции

Функция Подмены()

	подмены = Новый Соответствие;
	подмены.Вставить( """Null""", "null" );
	подмены.Вставить( """__positioner__right""", "function() { return { x: this.chart.chartWidth - this.label.width, y: 10 }; }" );
	подмены.Вставить( """__positioner__left""", "function() { return { x: 50, y: 10 }; }" );
	подмены.Вставить( """__syncExtremes__""", "syncExtremes" );
	
	Возврат подмены;

КонецФункции
Показать
user1778480; rpgshnik; cleaner_it; igorkosmos; DrAku1a; RabadanovAG; wunderland; CrackedBone; perpleks; dour-dead; 🅵🅾️🆇; Lem0n; Dracarys; ZSS2014; rhtr; Saint13; shalimski; TreeDogNight; kirillkr; kiruha; +20 Ответить
4. Degrement 126 22.11.17 16:10 Сейчас в теме
(3)
строкаJSON

Спасибо за пример. Я сейчас тоже в этом направлении рыть начал. Пока написал инструкцию для "чайников", чтоб было с чего начать.
5. ABudnikov 3 22.11.17 17:17 Сейчас в теме
А можно каким-то образом скрипт подключить к html полю 1С и получить такой красивый график внутри 1С?
6. Degrement 126 22.11.17 17:23 Сейчас в теме
(5)
ЭтаФорма.ЭлементыФормы.ПолеHTMLДокумента1.УстановитьТекст(""); 
	ЭтаФорма.ЭлементыФормы.ПолеHTMLДокумента1.Перейти(имяФайлаОтчета)
13. nayd 9 23.11.17 16:07 Сейчас в теме
ЭтаФорма.ЭлементыФормы.ПолеHTMLДокумента1.УстановитьТекст("");
ЭтаФорма.ЭлементыФормы.ПолеHTMLДокумента1.Перейти(имяФайлаОтчета)


В управляемой форме не могу разобраться, как вывести результат графика на форму.
Выдает 4 ошибки "На этой странице произошла ошибка сценария"

PS: кажется, дело в том, что html в 1с работает в режиме совместимости IE7
7. ILM 240 23.11.17 05:42 Сейчас в теме
Я так понимаю, что с отключенным интернетом в локалке красивых графиков не видать?
Честно сознаюсь - сам ещё не пробовал
8. Degrement 126 23.11.17 07:59 Сейчас в теме
(7)
По идее должно работать и без интернета, надо будет проверить, библиотеки все локальные.
9. ILM 240 23.11.17 11:11 Сейчас в теме
20. webester 26 04.02.18 20:00 Сейчас в теме
(7)Да вполне себе видать. Можно даже поле HTML документа на форму положить и получить графики внутри 1С правда за счет того, что там движок кривоват, выходит не всегда хорошо. Но в целом простые графики, две три штуки вполне себе получались.
10. acsent 1199 23.11.17 11:25 Сейчас в теме
вместо
СтрокаКурса.Дата - дата(1970,1,1,1,0,0) + 3600
можно
СтрокаКурса.Дата - дата(1970,1,1,0,0,0)
11. DitriX 2091 23.11.17 11:59 Сейчас в теме
как то странно сделано, а не проще сделать функцию в листе, куда вы будете слать данные из 1с, а то сейчас получается, если надо изменить данные - будет пересоздана страница, я верно понимаю?
12. Degrement 126 23.11.17 12:03 Сейчас в теме
(11)
В вэб программировании не силён, но я думаю такое реализовать возможно. Кстати вот пример на сайте разработчиков с динамическим выводом данных: https://www.highcharts.com/stock/demo/dynamic-update
14. Dimasik2007 430 23.11.17 22:05 Сейчас в теме
Не забываем - что этот движок не является бесплатным, и лицензия начинается от $430. Также на сайте часто примеры на его основе выкладываются. Особо богаты комментарии к подобным темам на решение подводных камней.
15. TreeDogNight 22 24.11.17 21:31 Сейчас в теме
(14) Можете скинуть ссылку где выкладывают эти примеры?
16. Dimasik2007 430 27.11.17 22:36 Сейчас в теме
17. Dimasik2007 430 27.11.17 22:38 Сейчас в теме
(15) И да, вы там бывали (в 16-м году, см. комменты :))
19. TreeDogNight 22 09.12.17 07:33 Сейчас в теме
18. borda4ev 15 29.11.17 09:24 Сейчас в теме
Идем сюда: https://datavizcatalogue.com/RU/index.html
Выбираем понравившийся график, идем и читаем API. Профит!
palsergeich; Dimasik2007; +2 Ответить
Оставьте свое сообщение