HTML в новой версии 8.3.14 на примере 3-х JavaScript библиотек: AmCharts, HighCharts, DHTMLX

Публикация № 991938

Программирование - Практика программирования

HTML HTML5 javasript chart диаграмма диаграмма Ганта

156
Тестируем возможности HTML в новой версии 8.3.14 платформы на примере 3-х JavaScript библиотек: AmCharts, HighCharts, DHTMLX.

На момент написания статьи 14-я платформа доступна только в тестовой версии, все тесты я проводил на версии 8.3.14.1494, в файловом режиме работы.

Итак, в новой версии платформы разработчики отказались наконец от использования Microsoft Internet Explorer в поле HTML-документа. Далее выдержка из описания изменений:

 

Клиентские приложения, работающие под управление ОС Windows, для работы со справочной системой,
синтакс-помощником, а также с полем HTML-документа, планировщиком, форматированным документом 
и редактором HTML-документа используют библиотеку WebKit. Microsoft Internet Explorer для данных 
целей больше не используется.
Библиотека поставляется вместе с платформой и не требует дополнительной установки.
Типом значения свойства ПолеHTMLДокумента.Документ стал ВнешнийОбъект. Изменилась DOM-модель, 
которая доступна при обращении к данному свойству.
Рекомендуется провести анализ использования элемента формы ПолеHTMLДокумента и исправить 
реализацию в том случае, если реализация использовала возможности, которые специфичны только 
для Microsoft Internet Explorer.

Вместо IE теперь используется какой-то вебкит, больше ничего полезного на первый взгляд. Но существует гораздо более информативная и подробная статья, что же собственно произошло с HTML в 1С, рекомендую ознакомиться https://habr.com/ru/company/1c/blog/425713/. Если вкратце, ребята описывают муки выбора браузерного движка для замены IE и почему вообще возникла такая проблема. В конце статьи они отговаривают использовать HTML для реализации бизнес логики, но нас такими пустяками не испугать. Итак, приступим к тестированию возможностей чартинга

AmCharts

https://www.amcharts.com/

Библиотека от литовских разработчиков

Лицензия: Proprietary. Можно использовать бесплатно, но в углу чартов будет маленькое лого. От него можно избавиться, заплатив денежку.

Больше всего статей на инфостарте как раз по этой библиотеке. Отмечу большое разнообразие чартов, интерактивное взаимодействие с данными, но диаграмма Ганта по возможностям довольно скудная.

 

Bubble Chart

Кликом можно отключать видимость серий


 

Chord Diagram

Анимация летающих шариков работает как надо, смотрится завораживающе


 

Layered Column Chart

Масштабирование выделением области мышкой работает

 

Variable-height 3D Pie Chart

Здесь почему-то сектора не прорисованы до конца, в то время как в оригинале они выглядят объемными.

оригинал:


 

Funnel with Gradient Fill

Воронка тоже прорисовалась плохо, возможно я что-то криво подключил, пишите в комментариях, если знаете как побороть.

оригинал:


 

Polar Area Chart

Масштабирование выделением области мышкой работает


 

Selecting Multiple Areas Map

Множественный выбор стран работает, выглядит круто. Масштабирование колесиком мыши работает.


 

GANTT Chart With Dates

Это не совсем полноценная диаграмма Ганта, так как не хватает связей, но доступность ресурсов отобразить можно.


 

Роли и пользователи в Treemap

Демонстрация работы с данными 1C на примере вывода ролей в диаграмму Tree Map, ресурсом выступает количество пользователей с такой ролью (HTML текст взят с другой рабочей базы на старой платформе, поэтому использую вкладку "Свой код")


 

Свой код

В поле «Вид диаграммы» можно выбрать значение «Свой код», этот вариант пригодится, если вы захотите потестировать остальные демо примеры библиотек с сайта. Для этого просто скопируйте javascript код на вкладку «HTML» и нажмите кнопку «Обновить» на вкладке «Диаграмма».


 

HighCharts

https://www.highcharts.com/

Библиотека от норвежских разработчиков Highsoft

Лицензия: Proprietary. Бесплатно для личного и некоммерческого использования. Для коммерческого использования придется заплатить денежку.

По это библиотеке статей на ИС поменьше. Библиотека очень богата на различные экзотические, но функциональные чарты, хороший интерактив, отличная диаграмма Ганта. На мой взгляд, она по всем параметрам чуть-чуть лучше AmCharts, так что присмотритесь к ней, если будете выбирать на чем строить визуализацию данных.

 

Basic Area

Кликом можно отключать видимость серий


 

Packed Bubble Chart

Кликом можно отключать видимость серий


 

User Supplied Data

Интересный график, где точки можно добавлять кликом мышки. График автоматически масштабируется, если точка находится близко к краю поля.


 

Draggable Box 3D

Полноценный 3D график с точками, который можно крутить в любую сторону мышкой, выглядит очень круто. Почему-то все точки нарисованы черным, хотя в оригинале они цветные. Возможно я что-то напутал со стилями, глубоко не разбирался.


 

Gantt Resource

В обработке используется ресурсная диаграмма для того, чтобы можно было сравнить с AmCharts, но на самом деле возможности HighCharts гораздо шире. Есть проектные диаграммы со связями, поддерживается интерактивное изменение сроков, прогресс, картинки в интервалах и т.д.


 

Роли и пользователи в Packed Bubble

Демонстрация работы с данными 1C на примере вывода ролей в диаграмму Packed Bubble Chart, ресурсом выступает количество пользователей с такой ролью. Подписи выводятся только для ролей, у которых более 10 пользователей.


 

Свой код

Для тестирования демо примеров с сайта HighCharts, придется выполнить несколько действий. Разберем вариант просмотра кода в СodePen, нажмите соответствую кнопку на сайте под демо диаграммой — откроется окно онлайн редактора CodePen. Здесь нас интересует раздел HTML, скопируйте его содержимое в обработку, на вкладку «HTML». Далее надо скопировать код на javascript. Копируем код из раздела «JS» онлайн редактора и вставляем в обработку после предыдущего копипаста, обрамив этот участок кода тегом <script>. Для упрощения этой процедуры в обработке предусмотрена кнопка «<script>», которая обрамляет выделенный участок текста этим тегом. Опционально можно скопировать раздел «CSS» онлайн редактора, вставив его перед разделом JS и обрамив тегом <stylesheet>(в обработке есть соответствующая кнопка); на работоспособность он не влияет, но может менять внешний вид диаграммы. Нажмите кнопку «Обновить» на вкладке «Диаграмма».


 


 

DHTMLX

https://dhtmlx.com/

Библиотека от литовских разработчиков Dinamenta UAB (Литва прям лидер по JS визуализации :)

Лицензия: GNU GPL. Можно использовать бесплатно с некоторыми ограничениями даже в коммерческих проектах. За деньги дают некоторые продвинутые фишки, описанные на сайте разработчика.

По этой библиотеке совсем нет статей на ИС. Выглядит довольно сурово, но обладает неплохими возможностями по визуализации данных. Особенно хорошо проработана здесь диаграмма Ганта, на мой взгляд, она даже более продвинутая чем в AmCharts или в HighCharts. Остальные чарты выглядят скромнее и не отличаются сильным разнообразием.

 

Simple Gantt

Простая проектная диаграмма Ганта, поддерживается интерактивное изменение сроков, добавление задач, изменение связей. По задачам строится иерархическая структура


 

Rightside Columns Gantt

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


 

Task Calendars Gantt

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


 

Keyboard Navigation Gantt

Диаграммой можно управлять с клавиатуры, поддерживаемые сочетания клавиш видно на скриншоте.


 

Сессии по журналу регистрации

Демонстрация работы с данными 1C на примере вывода длительности сессий работы пользователей в базе за последнюю неделю в диаграмму Ганта. Ничего более полезного и универсального, работающего на любой конфигурации придумать не смог, но для тестирования сойдет.


 

Свой код

Для тестирования демо примеров с сайта DHTMLX, придется выполнить несколько действий. Для начала перейдите в специальный демо раздел сайта, отсюда проще копировать код: https://docs.dhtmlx.com/gantt/samples/

Откройте какую-нибудь диаграмму и выберите через контекстное меню «Просмотр кода страницы» (Ctrl+U). Откроется текст страницы, скопируйте его в обработку на вкладку «HTML». Нажмите кнопку «Обновить» на вкладке «Диаграмма».


 

Что из себя представляет обработка

Весь код выводимых диаграмм сосредоточен в макете «Чарты», по ячейке на каждый чарт. Можно по аналогии добавлять с сайтов любую новую диаграмму в следующую ячейку (прописав соответствующий код вывода). Дополнительно в обработку внедрен исходный код из библиотек AmCharts, HighCharts, DHTMLX, который подставляется в код диаграммы, заменяя html ссылки на исходный код. Такая замена позволяет использовать javascript библиотеки вообще без подключения к интернету, из чего вытекает и минус — версии библиотек остаются неизменными, теми, которые зашил программист при обновлении обработки. При выборе вида диаграммы из списка HTML текст подгружается из соответствующей ячейки макета «Заготовка» и после замены ссылок на файлы библиотек на текст кода из соответствующих макетов HTML, строка присваивается данным элемента «Поле HTML документа».

По мере тестирования, обнаружил, что часто приходится вписывать однотипные теги, поэтому добавил пару кнопок на форму обработки

«<script>» - вставляет вокруг выделенного куска текста теги <script>...</script>

«<style>» - вставляет вокруг выделенного куска текста теги <style type="text/css">...</style>


 

Выводы

Наконец 1С развязал нам руки в плане использования современного HTML прямо на форме. Пусть пока в тестовой версии, но через некоторое время 8.3.14 выйдет в релиз и можно будет использовать эти возможности в работе. На ум приходят следующие сферы применения HTML полей: визуализация данных, 3D моделирование и анимация, сложные и динамически изменяемые формы ввода информации.

Update

31.01.2019 вышла релизная версия 8.3.14.1565, можно полноценно использовать HTML5 в работе!

156

Скачать файлы

Наименование Файл Версия Размер
HTML в новой версии 8.3.14 на примере 3-х JavaScript библиотек: AmCharts, HighCharts, DHTMLX:
.epf 1,13Mb
29.01.19
39
.epf 1,13Mb 39 Скачать

См. также

Специальные предложения

Комментарии
Избранное Подписка Сортировка: Древо
1. rpgshnik 1058 30.01.19 06:00 Сейчас в теме
УРА УРА УРА! Даже не обратил внимание на такую роскошь в 8.3.14.
2. JIEX@ 30.01.19 07:45 Сейчас в теме
3. manlak 77 30.01.19 09:42 Сейчас в теме
4. KEV8383 20 30.01.19 10:03 Сейчас в теме
5. CyberCerber 267 30.01.19 10:36 Сейчас в теме
6. Sla 30.01.19 10:50 Сейчас в теме
Огромная работа! Респектище!!!
Возможно ли подключить к-л библиотеку для динамической проверки орфографии (подчеркивать красным как в Word-e)?
10. Synoecium 608 30.01.19 14:12 Сейчас в теме
(6) попробуйте API Яндекс.Спеллер https://tech.yandex.ru/speller/, там есть REST интерфейс, который можно использовать на любой версии платформы 1С, проверяя то, что ввел пользователь в реквизит формы. По идее через JSON интерфейс тоже можно использовать этот API, но зачем? Разве что для какого нибудь продвинутого текстового редактора, который будет выдавать варианты подчеркнутых слов.
Для онлайн сервисов обычно есть ограничения, например у Яндекса:
на количество обращений к Сервису - в размере 10 тысяч обращений в сутки;
на объем проверяемого текста - в размере 10 миллионов символов в сутки.
Можно еще рассмотреть оффлайн спеллер, но для этого вам нужен будет словарь корректных слов, по которому надо искать слова из текста, введенного пользователем. Это можно сделать даже средствами 1с, если устроит производительность (навскидку, грузим словарь в соответствие и парсим текст наколеночным парсером в 1с, чтобы проверять отдельные слова в соответствии)
antonio_i; Sla; +2 Ответить
7. loda 24 30.01.19 10:50 Сейчас в теме
8. Synoecium 608 30.01.19 11:18 Сейчас в теме
(7) а еще Chart.js и с десяток других библиотек. Целью статьи не является сравнение всех библиотек, это скорее демонстрация возможностей HTML поля в 1С на новой платформе, поэтому я взял то, с чем сам пробовал работать. Для интересующихся отличиями и возможностями рекомендую самим пройти по сайтам с демо примерами и подобрать нужный фреймворк, также обзорную информацию можно получить вот здесь: https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_libraries
antonio_i; rpgshnik; CyberCerber; user774630; +4 Ответить
9. loda 24 30.01.19 11:22 Сейчас в теме
(8) Понятно. Просто вдруг в google charts что то не понравилось и вы могли бы этим поделиться.
Спасибо за проделанную работу.
11. dmarenin 215 30.01.19 18:46 Сейчас в теме
(0) проксирование в контекст 1с js eventов не завезли еще(в вашем примере перемещение, создание ганта например)? а то есть там поле Документ.defaultView.V8EventProxyObject а что с ним делать пока не понятно. Кто то уже знает?
13. dmarenin 215 31.01.19 18:06 Сейчас в теме
(11) кто не понял, сможет ли web kit в 3.14 так? если да то как?
Прикрепленные файлы:
12. antonio_i 32 31.01.19 14:17 Сейчас в теме
Супер. Наконец-таки это свершилось! (почти)
14. amd1986 01.02.19 13:55 Сейчас в теме
кто нибудь знает как подключить веб камеру к "Поле HTML документа"? Не используя внешних компонент и ресурсов. Т.е. уже встроенными средствами 1С. На 8.3.14.
15. Synoecium 608 03.02.19 11:27 Сейчас в теме
(14) покопался в вопросе подключения камеры в HTML5, в общем в веб клиенте работает (первый раз нужно разрешить использовать камеру), а вот в тонком клиенте запустить не получилось. Скорее всего тонкий клиент не поддерживает использование GetUserMedia(). Если кто в курсе как подключить, пишите в комментариях.
Прикрепляю обработку, которая демонстрирует захват с камеры в веб-клиенте.
Прикрепленные файлы:
ПроверкаВебки.epf
16. dmarenin 215 04.02.19 16:56 Сейчас в теме
(15) поле html в веб-клиенте - это iframe. через него дотянутся до родительского окна вряд ли получится.
17. amd1986 04.02.19 19:28 Сейчас в теме
(16)Жалко. Очень хотелось доработать механизм распознавания лиц из 1С не используя внешние компоненты. Придется пока костылять по старому..
18. amd1986 04.02.19 20:21 Сейчас в теме
19. KAV2 82 12.02.19 13:37 Сейчас в теме
Интересно, работает ли обработка событий? То есть чтобы по клику открыть расшифровку в СКД?
20. Synoecium 608 12.02.19 13:42 Сейчас в теме
(19) имеете ввиду чтобы в 1с СКД отчете при расшифровке ячейки показывать html поле с javascript визуализацией? По идее делается достаточно просто. Или вы имеете ввиду другую обработку событий - события из javascript диаграммы, перехватываемые в 1с?
21. KAV2 82 12.02.19 14:34 Сейчас в теме
(20) Да, я имею в виду второе, то есть перехват клика по html, и открытие уже 1С-ного отчета в качестве расшифровки.
kuznecov_egor; +1 Ответить
22. kuznecov_egor 12.02.19 15:51 Сейчас в теме
(21) Было бы интересно, если бы кто-нибудь пояснит, как это делается)
sergio199; +1 Ответить
27. badboychik 60 09.04.19 15:04 Сейчас в теме
(22) Ничего сложного, вставляете в HTML data-атрибуты и при клике считываете, передаете в 1С функцию
23. Synoecium 608 13.02.19 08:25 Сейчас в теме
(21) Смотрите, у поля html в 1с есть событие ПриНажатии(), в нем есть доступ к данным события через параметр "ДанныеСобытия", в нем уже надо смотреть какие данные вам нужны для конретной диаграммы.
Например, в моей обработке есть диаграмма HighCharts->User Supplied Data, добавляем следующий обработчик нажатия на поле html:
&НаКлиенте
Процедура ХТМЛтекстПриНажатии(Элемент, ДанныеСобытия, СтандартнаяОбработка)
	Сообщить("x = "+ДанныеСобытия.Event.xAxis["0"].value);
	Сообщить("y = "+ДанныеСобытия.Event.yAxis["0"].value);
КонецПроцедуры


теперь при создании точки на диаграмме в 1с будет выводиться сообщение с её координатами
24. KAV2 82 13.02.19 08:42 Сейчас в теме
(23) Спасибо! Здорово что это работает в 8.3.14!
25. molot 280 23.03.19 14:38 Сейчас в теме
Блин, ну всё отлично работает в 8.3.14, но... В яндекс-картах перетаскивание не работает вообще никак! Вот печаль-беда... Может, я что не так делаю...
26. Steelvan 09.04.19 09:59 Сейчас в теме
Как вариант, взаимодействие ПолеHTMLДокумента <-> 1С можно настроить через веб-гнезда с использованием библиотеки https://infostart.ru/public/937068/

Не проверял, выкладка теоретическая

Обработка (на которой находится ПолеHTMLДокумента) при открытии должна запускать сервер веб-гнезд с прослушиванием определенного местного порта, например 127.0.0.1:2347. Соответственно, если обработок несколько, то порт++.
ПолеHTMLДокумента должно содержать js код для работы с веб-гнездами. ПолеHTMLДокумента при открытии должно создавать соединение с этим сервером, которое работает в оба конца для приема и передачи. И через веб-гнездо выполнять двусторонний обмен данными ПолеHTMLДокумента <-> 1С при разных событиях в ПолеHTMLДокумента или в 1С.
Для тонкого клиента должно работать.
28. gudun_ku 58 10.04.19 17:01 Сейчас в теме
Вопрос - зачем оборачивать все это великолепие в формы 1С?
29. Steelvan 13.04.19 11:32 Сейчас в теме
(28) Намек на попытку компенсировать ущербность ? ;)
30. acanta 48 13.04.19 11:41 Сейчас в теме
(29) Она оказалась неудачной? Жаль. Надеюсь, что не последняя.
Оставьте свое сообщение