Пользовательский виджет "Картосхема"

Вы можете создать собственный виджет, который позволит добавлять в ваши дашборды карту с визуализацией данных. Прежде всего, необходимо добавить карту, которую вы будете использовать, на сервер. Для этого выполните следующие шаги:

1. Создайте векторное изображение картосхемы в редакторе SVG файлов, или скачайте готовый файл из интернета.
2. Откройте получившийся файл в редакторе кода.
3. Скопируйте получившийся код и вставьте в форму кода на портале https://highcharts.github.io/map-from-svg/.
4. Нажмите кнопку Load и посмотрите, что получилось справа:
   
   
   
   
5. Скопируйте код карты в блокнот и добавьте каждому полигону следующие параметры:
   • hc-code – ID региона, который вы потом сможете использовать в таблицах и т.д. Можно, например, использовать код ОКАТО региона;
   • short-name – неполное название региона. Например, Коми;
   • full-name – полное название региона. Например, Республика Коми.
     
     
     
     
6. Сохраните получившийся код в формате *.js.
7. Назовите файл, например, russia-wiki.js.
8. Добавьте получившийся файл на сервер в папку по адресу /docker-volume/dashboard-viewer/customjs.

Карта создана и добавлена на сервер. Теперь необходимо создать новый виджет с этой картой в Dashboard Designer. Для этого выполните следующие шаги:

1. Откройте приложение Dashboard Designer.
2. На вкладке Пользовательские виджеты, нажмите кнопку Создать:
   
   
   
   
3. В открывшемся окне введите название виджета.
4. В поле Код виджета (JavaScript) вставьте код из файла widgets_kod.js (см. ниже):
   
   	Файл	Изменено

5. Нажмите кнопку Создать:
   
   
   
   

   Важно!

   Если у вас другое имя карты, не забудьте указать его:

   

6. Добавьте виджет в рабочую область.
7. На вкладке Привязка данных, привяжите виджет к данным:
   
   

Виджет отобразит загруженные данные: