Сравнение версий
Версия | Старая версия 26 | Новая версия Текущий |
---|---|---|
Изменения, внесенные | ||
Сохранено |
Ключ
- Эта строка добавлена.
- Эта строка удалена.
- Изменено форматирование.
Вы можете создать собственный виджет, который позволит добавлять в ваши дашборды карту с визуализацией данных. Для этого необходимо:
Создать карту на основе которой будет построен виджет и добавить её на сервер.
Создать новый виджет-картосхему.
Добавление карты
Создайте векторное изображение картосхемы в редакторе SVG файлов, или скачайте готовый файл из интернета.
Откройте получившийся файл в редакторе кода.
Скопируйте получившийся код и вставьте в форму кода на портале https://highcharts.github.io/map-from-svg/.
Нажмите кнопку Load и посмотрите, что получилось справа:
![](https://visiology-doc.atlassian.net/wiki/download/thumbnails/269427157/map.png?version=2&modificationDate=1663757480780&cacheVersion=1&api=v2&width=800)
Image Added
Кликните на View Highcharts Maps config и скопируйте код карты в окне справа:
![](https://visiology-doc.atlassian.net/wiki/download/thumbnails/269427157/map-code.png?version=1&modificationDate=1663775756098&cacheVersion=1&api=v2&height=400)
Image Added
Вставьте код в блокнот и добавьте каждому контуру региона следующие параметры:
hc-code
– ID региона, который вы потом сможете использовать в таблицах и т.д. Можно, например, использовать код ОКАТО региона;short-name
– неполное название региона. Например, Коми;full-name
– полное название региона. Например, Республика Коми.
Например:Блок кода "full-name": "Республика Саха (Якутия)", "short-name": "Якутия", "hc-code": "98000000000",
![](https://visiology-doc.atlassian.net/wiki/download/thumbnails/269427157/code.png?version=2&modificationDate=1663777848922&cacheVersion=1&api=v2&width=800)
Image Added
Сохраните получившийся код в формате *.js.
Назовите файл, например, russia_wiki.js.
Добавьте получившийся файл на сервер в папку по адресу /docker-volume/dashboard-viewer/customjs.
Образец готового файла: russia_regions.js
Чтобы узнать как добавить стандартную карту в контейнер платформы, см. Настройка картографического измерения.
Создание виджета
Карта создана и добавлена на сервер. Теперь необходимо создать новый виджет с этой картой в Dashboard Designer. Для этого выполните следующие шаги:
Откройте
приложение Dashboard Designer.
На вкладке Пользовательские виджеты, нажмите кнопку Создать:
![](https://visiology-doc.atlassian.net/wiki/download/thumbnails/269427157/new-widget.png?version=1&modificationDate=1663759394284&cacheVersion=1&api=v2&width=800)
Image Added
В открывшемся окне введите название виджета.
В поле Код виджета (JavaScript) вставьте код из
файла widgets_kod.js: widgets_kod.js
Нажмите кнопку Создать:
Image Modified
Примечание Важно!
Если у вас другое имя карты, не забудьте указать его:
Image Modified
Добавьте виджет
в рабочую область.
На
вкладке Привязка данных, привяжите виджет к данным:
![](https://visiology-doc.atlassian.net/wiki/download/thumbnails/269427157/created-map.png?version=1&modificationDate=1663761033154&cacheVersion=1&api=v2&width=800)
Image Added
Виджет отобразит загруженные данные:Image Removed
![](https://visiology-doc.atlassian.net/wiki/download/thumbnails/269427157/image-20200317-131226.png?version=1&modificationDate=1621301128226&cacheVersion=1&api=v2&width=421)
Примечание |
---|
Важно! Для корректного отображения информации, в данных должны быть указаны геокоды, например, как один из атрибутов измерений. Данные геокоды должны соответствовать значениям |
Пример
Рассмотрим пример подготовки данных для работы с картосхемой:
Создайте измерение, одним из атрибутов которых будет геокод из файла карты (в нашем случае это файл russia_wiki.js).
![](https://visiology-doc.atlassian.net/wiki/download/thumbnails/269427157/measures1.png?version=1&modificationDate=1663784752992&cacheVersion=1&api=v2&width=800)
Image Added
Укажите в свойствах элементов измерения данные из файла russia_wiki.js:
![](https://visiology-doc.atlassian.net/wiki/download/thumbnails/269427157/geo-data.png?version=1&modificationDate=1663785882874&cacheVersion=1&api=v2&width=800)
Image Added
При привязке данных к созданному виджету Картосхема в Dashboard Designer, укажите геокод в качестве одного из измерений:
![](https://visiology-doc.atlassian.net/wiki/download/thumbnails/269427157/measure2.png?version=1&modificationDate=1663786757593&cacheVersion=1&api=v2&width=600)
Image Added
Данные отобразятся на картосхеме:
![](https://visiology-doc.atlassian.net/wiki/download/thumbnails/269427157/map-data.png?version=2&modificationDate=1663787334515&cacheVersion=1&api=v2&width=800)
Image Added
Смотрите также
На этой странице
Оглавление |
---|
Нужна дополнительная помощь?
Свяжитесь с технической поддержкой
Или нажмите Image Modified в приложении, чтобы задать вопрос.