Сравнение версий

Ключ

  • Эта строка добавлена.
  • Эта строка удалена.
  • Изменено форматирование.

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

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

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

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

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

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

  3. Скопируйте получившийся код и вставьте в форму кода на портале https://highcharts.github.io/map-from-svg/.

  4. Нажмите кнопку Load и посмотрите, что получилось справа:

Image Removed

  1. Image Added

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

Image Removed
  1. Image Added

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

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

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

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

      Блок кода
      "full-name": "Республика Саха (Якутия)",
      "short-name": "Якутия",
      "hc-code": "98000000000",
Image Removed View filename
    • Image Added
  1. Сохраните получившийся код в формате *.js.

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

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


  1. russia_

wiki
  1. regions.js

height250

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

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

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

  1. Откройте

приложение Dashboard
  1. приложение Dashboard Designer.

  2. На вкладке Пользовательские виджеты, нажмите кнопку Создать:

Image Removed
  1. Image Added

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

  3. В поле Код виджета (JavaScript) вставьте код из

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

(см. ниже) View filename
  1. :


  1. widgets_kod.js

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

    Image Modified

    Примечание

    Важно!

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

    Image Modified

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

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

  2. На

вкладке 
  1. вкладке Привязка данных, привяжите виджет к данным:

Image Removed

  1. Image Added

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

Image Added
Примечание

Важно!

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

Пример

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

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

-
  1. _wiki.js).

Image Removed

  1. Image Added

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

-
  1. _wiki.js:

Image Removed
  1. Image Added

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

Image Removed
  1. Image Added

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

Image RemovedМатериалы по теме
  1. Image Added

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

На этой странице

Оглавление

Нужна дополнительная помощь?

Свяжитесь с технической поддержкой
Или нажмите Image Modified в приложении, чтобы задать вопрос.