1. Выбор SVG

Для начала вам понадобится изображение в svg. Подойдет не любое.

Вот пример SVG, с которой получится хорошо поработать. Уже по картинке видно, что каждый ее элемент – это своего рода отдельная часть. И, скорее всего, если мы посмотрим данную картинку как html (откроем в любом текстовом редакторе), то увидим, что за каждым элементом закреплен уникальный id. Забегая вперед, скажу, что этот самый id нам понадобится для настройки фильтров в приложении, поэтому очень важно на начальном этапе правильно выбрать картинку.

А вот тут всё плохо :(

Казалось бы, все красиво, расписано по частям, но это только с виду все хорошо. Если мы взглянем на html, то увидим, скорее всего, один элемент (с одним id соответственно), который отвечает за весь рисунок. А с таким раскладом сильно не размахнешься. Или вам нужна фигура из одного цвета?

2. Обработка svg

После выбора качественной и подходящей картинки хорошо бы переопределить id элементов и сделать их более понятными. Напомню, мы их будем использовать в качестве фильтра. Продолжим на примере с овечкой.

Изначально в id был записан какой-то неочевидный код. После того, как мы его переименовали, стало понятно, что элемент из примера ниже отвечает за траву на картинке.

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

*Для того, чтобы понять, за что отвечает какой-либо элемент на картинке, можно просто вырезать его из html и обновить svg в браузере. Что-то пропадет, а вы поймете, что это и как назвать :)

3. Подготовка табличных данных

Когда все необходимые id переименованы, нужно создать таблицу с информацией о них.

Таблицу можно создать в любом удобном для вас табличном формате: бд, xlsx, csv, qvd. Главное, чтобы Qlik Sense поддерживал этот формат. Как видно по рисунку, в первую колонку мы выписываем id, которые до этого переименовали в html.

Затем добавляем столбец count , который будет использоваться для расчетов и переопределения цветов. В дальнейшем, когда загрузим данную таблицу в приложение Qlik Sense, мы создадим меру, которая опирается на данные цифры, что-то вроде: если count > 49, то раскрасить все такие элементы зеленым цветом.

*Название столбцов в таблице не обязательно такое, также как и количество. 

4. Работа в QS, этап подготовки

Итак, на текущий момент у нас уже есть подготовленная картинка и файл с данными о ней. Переходим к работе в QS.

Плагин, который предоставит нам возможность обрабатывать такие картинки, называется svgReader. Изначально необходимо удостовериться, что он установлен. Это можно проверить следующим образом: переходим на панель администратора на вкладку Extensions, ищем по названию.

Затем необходимо загрузить svg как доступный контент, чтобы была возможность отобразить ее в приложении по абсолютному пути. На панели администратора переходим на вкладку content libraries, там будет доступен default контент, нажимаем на него. Открывается окно (см. скрин ниже) -> нажимаем на Contents (панель справа) -> upload -> выбираем svg –> после загрузки необходимо скопировать URL path (это и будет абсолютный путь).