Сравнение страниц

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

1. Создать карту на основе которой будет построен виджет и добавить её на сервер.
2. Создать новый виджет-картосхему.

Добавление карты

1. Создайте векторное изображение картосхемы в редакторе SVG файлов, или скачайте готовый файл из интернета.
2. Откройте получившийся файл в редакторе кода.
3. Скопируйте получившийся код и вставьте в форму кода на портале https://highcharts.github.io/map-from-svg/.
4. Нажмите кнопку Load и посмотрите, что получилось справа:
   
   Image Modified
   
   
5. Кликните на View Highcharts Maps config и скопируйте код карты в окне справа:
   
   Image Modified
   
   
6. Вставьте код в блокнот и добавьте каждому контуру региона следующие параметры:
   • hc-code – ID региона, который вы потом сможете использовать в таблицах и т.д. Можно, например, использовать код ОКАТО региона;
   • short-name – неполное название региона. Например, Коми;

   • full-name – полное название региона. Например, Республика Коми.
     Например:

     Блок кода
     "full-name": "Республика Саха (Якутия)", "short-name": "Якутия", "hc-code": "98000000000",

     
     Image Modified
     
     

7. Сохраните получившийся код в формате *.js.
8. Назовите файл, например, russia

1. _wiki.js.
2. Добавьте получившийся файл на сервер в папку по адресу /docker-volume/dashboard-viewer/customjs.
   Образец готового файла: russia_wiki.js

Создание виджета

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

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

1. : widgets_kod.js

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

   Примечание
   Важно! Если у вас другое имя карты, не забудьте указать его: Image Modified

   
   

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

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

Image Modified

Пример

Рассмотрим пример подготовки данных для работы с картосхемой:

1. Создайте измерение, одним из атрибутов которых будет геокод из файла карты (в нашем случае это файл russia

1. _wiki.js).
   
   Image Added
   
   
2. Укажите в свойствах элементов измерения данные из файла russia_wiki.js:
   
   Image Added
   
   
3. При привязке данных к созданному виджету Картосхема в Dashboard Designer, укажите геокод в качестве одного из измерений:
   
   Image Added
   
   
4. Данные отобразятся на картосхеме:
   
   Image Added

Материалы по теме

• Создание/редактирование/удаление измерения
• Добавление измерений и показателей