Всем привет. В этой статье я хочу поделиться опытом разработки интерактивных карт областей в "1С:Аналитика" для одного из крупных заказчиков в здравоохранении. Задача стояла визуализировать медицинскую статистику не просто точками на карте, а целыми районами, чтобы руководство могло одним взглядом оценить ситуацию в регионе.

Если вы сталкивались с Маркерными картами в 1С:Аналитике, то знаете, что они привязывают данные к конкретным координатам (здания, организации). Карты областей - это другой подход. Здесь данные привязываются не к точкам, а к целым областям -районам, округам, помещениям на плане. Визуализация становится более наглядной для анализа по территориям.

Такую карту можно использовать не только для географических карт, но и для схем цехов, планов этажей и любых других векторных макетов.

Готовим основу

SVG-файл можно попробовать найти и скачать с помощью общедоступных ресурсов в сети Интернет, создать самим в редакторах векторной графики или запросить, если это карта региона/области/местности у Заказчика.

В нашем случае заказчик предоставил SVG-карту региона с границами районов.

SVG-карта региона, предоставленная Заказчиком

Такая карта должна содержать описание областей, заключенное в тегах <path … />, с указанием значения и ��араметра – data-id (параметр должен называться именно так) – это наименование области на карте, которая будет выделяться цветом при выполнении определенных условий.

Помимо этого, в тегах <text … /> можно указать текст, который будет выводиться по относительным заданным координатам. Впоследствии этот текст может быть заменен значением какого-либо факта (числа) или измерения (наименование области, района…) при выполнении определенных условий.

Для просмотра и редактирования SVG-файла, можно пользоваться любым текстовым редактором, но для удобства лучше использовать знакомый многим Notepad++

Часть кода с тегами <path … /> из нашего SVG-файла, предоставленного заказчиком

В path содержаться следующие параметры:

clip-path – это идентификатор-ссылка на тег карты, который объявлен в начале файла, везде будет одинаков.
Fill = "none" – тот параметр определяет цвет заливки внутри элемента. Значение "none" означает, что внутренняя область элемента не будет заполнена цветом.
Stroke = "#6E6E6E" – этот параметр определяет цвет обводки (или линии) элемента. Значение #6E6E6E — это шестнадцатеричный код цвета.
stroke-width = "0.48006" – этот параметр определяет толщину обводки. Значение 0.48006 — это толщина обводки в единицах SVG.
stroke-miterlimit = "10" – этот параметр контролирует внешний вид соединений между сегментами обводки.
stroke-linecap = "round" – этот параметр определяет форму концов открытых путей. Значение "round" означает, что концы линий будут округлены.
stroke-linejoin = "round" – этот параметр определяет форму соединения между двумя линиями.

Эти параметры можно «потрогать», изменить, но для нашего кейса мы в них ничего менять не будем, т.к. это не влияет на функциональность

Атрибут d= элемента <path … /> определяет путь, который будет нарисован. Значение атрибута d — это строка, содержащая ряд команд пути, где каждая команда состоит из буквы команды и чисел, которые представляют параметры команды.

Например:

M424.61389,385.00103: Команда M означает “переместиться к”. Это перемещает текущую точку к указанным координатам без создания линии. В нашем случае, перемещает текущую точку к координатам (424.61389, 385.00103).

L425.09395,384.28095, L425.33398,384.04092 и т.д. – команда L означает “линия к”, что создает линию от текущей точки к указанным координатам. В данном случае, создает линии к координатам (425.09395, 384.28095), (425.33398, 384.04092) и т.д.

Связываем карту и данные

Для работы с «Картой областей», SVG-карта должна быть определенного формата. У каждой области должен присутствовать параметр data-id, при этом значение, указанное в data-id должно в точности совпадать со значением поя в источнике данных диаграммы в Аналитике. Это необходимо для создания соответствия между областями карты и данными.

Наприм��р, если карта состоит из областей, за отображение которых отвечает тег <path … />, а у поля "Район/Населенный пункт", есть значения: "Первомайский район" и "Ярославль", то в атрибутах, в соответствующих тегах <path … />, необходимо указать параметр data-id=" Первомайский район" и data-id="Ярославль".

Наименования (значения) полей в Аналитике, которые должны быть в data-id

Параметр data-id которые будет отвечать за идентификацию и связку соответствующих частей карты и данных в Аналитике отсутствует. Исправим это, добавив атрибут и значение района data-id="Ярославский район", перед параметром «d=»:

<path clip-path="url(#SVG_CP_1)" fill="none" stroke="#6E6E6E" stroke-width="0.48006" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" data-id="Ярославский район" d="M…

Сохраняем наш файл и переходим в аналитику, где у нас добавлено Измерение «Район». Выбираем на панели диаграмм Карту областей и в управление картами добавляем наш файл с подготовленной картой.

Мы видим, что у нас успешно добавилась карта, но есть два момента:

Вокруг карты ненужная нам рамка (нам ведь ее не на стену вешать).
Мы указали в файле идентификатор data-id="Ярославский район", но закрашена только часть области.

Возвращаемся назад к нашему файлу в редакторе Notepad++

Рамка представляет собой еще один отдельный слой, который нужно найти и удалить.
Окрашена только часть области, т.к. некоторые районы, «нарисованы» не целиком, а частями.

Исправляем п.1 - удаляем второй слой с рамкой, его мы находим в нижней части файла.

Слой в svg, отвечающий за вывод рамки вокруг карты

Исправляем п.2 - костылим (пока). Для этого добавляем data-id="Ярославский район" по одному, в каждый следующий блок с тегом <path … />, потом переходим в Аналитику, загружаем обновленную карту, смотрим, повторяем, до момента пока не закрасится вся область, относящаяся к Ярославскому району.

Как мы видим на рисунке, цель почти близка, но нам «почти» не подходит.

Такое поведение границ района связанно, как раз с тем, что район "покрашен" частями. Исправляем. Нам необходимо «соединить координаты кусков областей. Для этого:

Находим конец 1-го блока <path … /> относящемуся к Ярославскому району (483.17149) и начало следующего блока, относящегося к нему же (M319.9606,483.17149L320.44067).
Соединяем их по последней совпадающей координате (удаляем часть), заменяя координату из последнего блока, такой же координатой из следующего:

Далее находим начало следующего (3-го блока) и аналогичным образом присоединяем и его. После чего сохраняем карту, переходим в Аналитику, загружаем, смотрим, что получилось.

Область карты с выделенным районом (связка с данными)

При наведении, область и ее границы выделяются, выводится информация о том какой район выбран в данный момент.

Добавим data-id="г. Ярославль" следующему блоку, загрузим в Аналитику. Также измерению «Район Ярославской обл.» разрешим красить соответствующие области карты.

Область карты района и столицы региона с цветовым выделением

Аналогичным образом добавляем параметр идентификации областей/районов для всех остальных частей, что есть на карте и присутствуют в 1С:Аналитике.

Подписи на карте

Следующий шаг, вывести на области карты название районов, которые при необходимости могут быть "подменены" Аналиткой числовыми данными (фактами) или измерениями.

«в тегах <text … /> можно указать текст, который будет выводиться по относительным заданным координатам. Впоследствии этот текст может быть заменен значением какого-либо факта (числа) или измерения (наименование области, района…) при выполнении определенных условий»

Добавим наименование района и города в svg.

Структура текстовых блоков <text … /> для нашего кейса — Структура текстовых блоков *<text … />* для нашего кейса

<text style="font-size:11px; font-weight:normal; fill:black; stroke:none">

- это элемент <text>, который используется для создания текста в SVG. Атрибут style определяет стиль текста. В данном случае, размер шрифта font-size равен 11 пикселям, вес шрифта font-weight- нормальный, цвет заливки fill- черный, нет обводки stroke.

<tspan sodipodi:role="line" data-id="г. Ярославль" y="450" x="355">Ярославль</tspan>

- это элемент <tspan>, который определяет подтекст внутри элемента <text> или другого элемента <tspan>. Он позволяет корректировать стиль и/или положение этого подтекста по мере необходимости. В данном случае, sodipodi:role="line" - это атрибут, который помогает управлять текстом. Атрибут data-id используется для хранения пользовательских данных, в данном случае - г. Ярославль. Атрибуты x="355" и y="450" определяют координаты начала базовой линии текста.

Сохраняем нашу карту и открываем в браузере, чтобы посмотреть, как выводятся наименования районов. Сразу видим ошибку:

Ошибка, связана с пространством имен sodipodi, которое не определено в нашем файле. Пространства имен используются для предотвращения конфликтов между именами в XML.

Чтобы исправить эту ошибку, нужно объявить пространство имен sodipodi в начале SVG-файла, добавив следующий атрибут в тег <svg>:

xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

По итогу верхняя часть svg-файла будет выглядеть следующим образом:

Визуализация

Добавим в нашу таблицу данных в 1С:Аналитике, необходимы нам поля: Организация и кол-во формируемых документов (сведений).

Выберем тип диаграммы Карта областей. Также, чтобы кол-во и организации подгрузились в карту укажем для них, что они должны служить «тултипом» на карте в Аналитике

В результате этого, при наведении на подсвеченую область, мы увидим организации, относящиеся к данному району и кол-во формируемых сведений каждым из них.

Если всё сделано правильно - районы начнут подсвечиваться при наведении, а при наличии данных - закрашиваться по градиенту (тепловая карта).

Далее карту можно раскрасить, представив ее как тепловую, в зависимости от веса данных по определенному району (как и требовалось для нашего заказчика):

Пример реализации тепловой карты региона

Заключение

Карты областей в 1С:Аналитике серьезный, но малоиспользуемый инструмент. ��ри этом он позволяет:

Визуализировать данные, что называется на местности.
Использовать не только геокарты, но и схемы, планы, логические зоны.
Гибко настраивать внешний вид через SVG.

Главное - правильно подготовить SVG и данные. Остальное - дело техники.

Интерактивные карты областей в BI-системе 1С: Аналитика