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

Программирование - Работа с интерфейсом

Данный подход опробован на библиотеках: Н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) Готовый результат:

См. также

Лучшие комментарии
3. Антон Степанов (Stepa86) 891 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" );
	
	Возврат подмены;

КонецФункции
Показать
perpleks; dour-dead; A1ice1990; Lem0n; gkstrade; ZSS2014; rhtr; Saint13; shalimski; TreeDogNight; kirillkr; kiruha; +12 Ответить
Остальные комментарии
1. kiruha Д (kiruha) 363 22.11.17 15:03 Сейчас в теме
Есть еще рисунки получаемых графиков ?
Алгоритм везде одинаковый ?
Как задается масштаб графика ?
2. Degrement Degrement (Degrement) 106 22.11.17 15:23 Сейчас в теме
Из того что делал:
1) Биржевые свечи.
2) Биржевые свечи + объём.
3) Несколько серий на одном графике.

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

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

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

В прикреплённом файле обработка по нескольким сериям.
Прикрепленные файлы:
График показатели.epf
3. Антон Степанов (Stepa86) 891 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" );
	
	Возврат подмены;

КонецФункции
Показать
perpleks; dour-dead; A1ice1990; Lem0n; gkstrade; ZSS2014; rhtr; Saint13; shalimski; TreeDogNight; kirillkr; kiruha; +12 Ответить
4. Degrement Degrement (Degrement) 106 22.11.17 16:10 Сейчас в теме
(3)
строкаJSON

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


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

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