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

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

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

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

Создайте векторное изображение картосхемы в редакторе SVG файлов, или скачайте готовый файл из интернета.
Откройте получившийся файл в редакторе кода.
Скопируйте получившийся код и вставьте в форму кода на портале https://highcharts.github.io/map-from-svg/.
Нажмите кнопку Load и посмотрите, что получилось справа:
Кликните на View Highcharts Maps config и скопируйте код карты в окне справа:
Вставьте код в блокнот и добавьте каждому контуру региона следующие параметры:
- hc-code – ID региона, который вы потом сможете использовать в таблицах и т.д. Можно, например, использовать код ОКАТО региона;
- short-name – неполное название региона. Например, Коми;
- full-name – полное название региона. Например, Республика Коми.
  Например:
  Блок кода
  "full-name": "Республика Саха (Якутия)", "short-name": "Якутия", "hc-code": "98000000000",
Сохраните получившийся код в формате *.js.
Назовите файл, например, russia_wiki.js.
Добавьте получившийся файл на сервер в папку по адресу /docker-volume/dashboard-viewer/customjs.
Образец готового файла:

View file
name russia_wiki.js
height 250

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

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

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

View file
name widgets_kod.js
height 250

Вложения
preview false
upload false
old false
patterns .*js
Нажмите кнопкуСоздать:

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

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

Примечание

Важно!

Для корректного отображения информации, в данных должны быть указаны геокоды, например, как один из атрибутов измерений. Данные геокоды должны соответствовать значениям hc-code из файла карты (в нашем примере это russia-wiki.js).

Пример

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

Создайте измерение, одним из атрибутов которых будет геокод из файла карты (в нашем случае это файл russia-wiki.js).
Укажите в свойствах элементов измерения данные из файла russia-wiki.js:
При привязке данных к созданному виджету Картосхема в Dashboard Designer, укажите геокод в качестве одного из измерений:
Данные отобразятся на картосхеме: