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

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

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

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

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

1. Создайте векторное изображение картосхемы в редакторе SVG файлов, или скачайте готовый файл из интернета.

2. Откройте получившийся файл

1. в редакторе кода.

1. Скопируйте получившийся код

1. и

1. вставьте в форму кода на портале https://highcharts.github.io/map-from-svg/.

1. Нажмите кнопку Load и

1. посмотрите, что получилось справа

1. :
   
   

   Image Added

2. Кликните на View Highcharts Maps config и скопируйте код карты в окне справа:
   

   Image Added

3. Вставьте код в блокнот

1. и добавьте каждому контуру региона следующие параметры:

   • hc-code

1. • – ID региона, который вы потом сможете использовать в таблицах и т.д. Можно, например, использовать код ОКАТО региона;

   • short-name

1. •  – неполное название региона. Например, Коми;

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

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

     Image Added

2. Сохраните получившийся код в формате

1. *.js

1. .

2. Назовите файл, например,

1. russia_wiki.js.

2. Добавьте получившийся

1. файл на сервер в папку

1. по адресу /docker-volume/dashboard-viewer/customjs.
   Образец готового файла: russia_regions.js

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

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

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

1. Откройте приложение Dashboard Designer.

2. На вкладке

1. Пользовательские виджеты

1. , нажмите

1. кнопку Создать:
   

   Image Added

2. В открывшемся окне введите название

1. виджета.

2. В поле

1. Код виджета

1.  (JavaScript) вставьте код из

1. файла widgets_kod.js: widgets_kod.js

2. Нажмите кнопку

1. Создать:
   
   Image Added

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

2. Добавьте виджет

1. в рабочую область.

2. На

1. вкладке Привязка данных

1. , привяжите

1. виджет к данным:
   
   

   Image Added

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

Image Added

Пример

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

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

   Image Added

2. Укажите в свойствах элементов измерения данные из файла russia_wiki.js:
   

   Image Added

3. При привязке данных к созданному виджету Картосхема в Dashboard Designer, укажите геокод в качестве одного из измерений:
   

   Image Added

4. Данные отобразятся на картосхеме:
   

   Image Added

Смотрите также

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

• Добавление измерений и показателей