Всем привет. В этой статье я хочу поделиться опытом разработки интерактивных карт областей в "1С:Аналитика" для одного из крупных заказчиков в здравоохранении. Задача стояла визуализировать медицинскую статистику не просто точками на карте, а целыми районами, чтобы руководство могло одним взглядом оценить ситуацию в регионе.
Если вы сталкивались с Маркерными картами в 1С:Аналитике, то знаете, что они привязывают данные к конкретным координатам (здания, организации). Карты областей - это другой подход. Здесь данные привязываются не к точкам, а к целым областям -районам, округам, помещениям на плане. Визуализация становится более наглядной для анализа по территориям.
Такую карту можно использовать не только для географических карт, но и для схем цехов, планов этажей и любых других векторных макетов.
Готовим основу
SVG-файл можно попробовать найти и скачать с помощью общедоступных ресурсов в сети Интернет, создать самим в редакторах векторной графики или запросить, если это карта региона/области/местности у Заказчика.
В нашем случае заказчик предоставил SVG-карту региона с границами районов.
Такая карта должна содержать описание областей, заключенное в тегах <path … />, с указанием значения и параметра – data-id (параметр должен называться именно так) – это наименование области на карте, которая будет выделяться цветом при выполнении определенных условий.
Помимо этого, в тегах <text … /> можно указать текст, который будет выводиться по относительным заданным координатам. Впоследствии этот текст может быть заменен значением какого-либо факта (числа) или измерения (наименование области, района…) при выполнении определенных условий.
Для просмотра и редактирования SVG-файла, можно пользоваться любым текстовым редактором, но для удобства лучше использовать знакомый многим Notepad++
В 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="Ярославский район", перед параметром «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 - удаляем второй слой с рамкой, его мы находим в нижней части файла.
Исправляем п.2 - костылим (пока). Для этого добавляем data-id="Ярославский район" по одному, в каждый следующий блок с тегом <path … />, потом переходим в Аналитику, загружаем обновленную карту, смотрим, повторяем, до момента пока не закрасится вся область, относящаяся к Ярославскому району.
Как мы видим на рисунке, цель почти близка, но нам «почти» не подходит.
Такое поведение границ района связанно, как раз с тем, что район "покрашен" частями. Исправляем. Нам необходимо «соединить координаты кусков областей. Для этого:
Находим конец 1-го блока
<path … />относящемуся к Ярославскому району (483.17149) и начало следующего блока, относящегося к нему же (M319.9606,483.17149L320.44067).Соединяем их по последней совпадающей координате (удаляем часть), заменяя координату из последнего блока, такой же координатой из следующего:
Далее находим начало следующего (3-го блока) и аналогичным образом присоединяем и его. После чего сохраняем карту, переходим в Аналитику, загружаем, смотрим, что получилось.
При наведении, область и ее границы выделяются, выводится информация о том какой район выбран в данный момент.
Добавим data-id="г. Ярославль" следующему блоку, загрузим в Аналитику. Также измерению «Район Ярославской обл.» разрешим красить соответствующие области карты.
Аналогичным образом добавляем параметр идентификации областей/районов для всех остальных частей, что есть на карте и присутствуют в 1С:Аналитике.
Подписи на карте
Следующий шаг, вывести на области карты название районов, которые при необходимости могут быть "подменены" Аналиткой числовыми данными (фактами) или измерениями.
«в тегах
<text … />можно указать текст, который будет выводиться по относительным заданным координатам. Впоследствии этот текст может быть заменен значением какого-либо факта (числа) или измерения (наименование области, района…) при выполнении определенных условий»
Добавим наименование района и города в svg.
<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 и данные. Остальное - дело техники.