Базовое отображение SVG
Элемент в SVG отображается в значение в наборе данных путем добавления значения из набора данных в качестве нового атрибута с
именем data-cv-key для соответствующего региона в SVG.
Прим.: Кроме того, для аннотирования файлов SVG можно использовать сторонние инструменты, например, Inkscape. Дополнительную информацию смотрите в разделе Использование Inkscape, чтобы аннотировать схематику для использования в IBM
Cognos Analytics в
https://community.ibm.com/community/user/businessanalytics/blogs/marco-maas1/2019/12/20/using-inkscape-to-annotate-schematics.
Отображение поддерживается для следующих элементов:
- Круг
- Эллипс
- Линейная диаграмма
- Путь
- Многоугольник
- Ломаная линия
- Прямоугольник
- Текстовый
- SVG
- ГБ
Прим.: Элемент G - не визуальный, он предназначен для группировки визуальных элементов вместе для создания составного элемента.
Поведение для других элементов SVG не определено.
Для следующего файла SVG не задан атрибут data-cv-key для кружков:
<?xml version="1.0" encoding="UTF-8"?>
<svg height="40" width="100" xmlns="http://www.w3.org/2000/svg">
<g>
<circle cx="10" cy="10" fill="#cd5c5c" r="10"/>
<circle cx="30" cy="10" fill="#fa8072" r="10"/>
<circle cx="50" cy="10" fill="#e9967a" r="10"/>
<circle cx="70" cy="10" fill="#ffa07a" r="10"/>
<circle cx="90" cy="10" fill="#dc143c" r="10"/>
</g>
<g>
<circle cx="70" cy="30" fill="#adff2f" r="10"/>
<circle cx="10" cy="30" fill="#ff0000" r="10"/>
<circle cx="30" cy="30" fill="#b22222" r="10"/>
<circle cx="50" cy="30" fill="#8b0000" r="10"/>
</g>
</svg>
Если загрузить эту визуализацию, будет показано следующее. Отображение в данные невозможно.
Если добавить атрибут data-cv-key в SVG, то данные можно будет отобразить в кружки в SVG.
<?xml version="1.0" encoding="UTF-8"?>
<svg height="40" width="100" xmlns="http://www.w3.org/2000/svg">
<g>
<circle data-cv-key="A2" cx="10" cy="10" fill="#cd5c5c" r="10"/>
<circle data-cv-key="A3" cx="30" cy="10" fill="#fa8072" r="10"/>
<circle data-cv-key="A4" cx="50" cy="10" fill="#e9967a" r="10"/>
<circle data-cv-key="A5" cx="70" cy="10" fill="#ffa07a" r="10"/>
<circle data-cv-key="B2" cx="90" cy="10" fill="#dc143c" r="10"/>
</g>
<g>
<circle data-cv-key="B3" cx="70" cy="30" fill="#adff2f" r="10"/>
<circle data-cv-key="B4" cx="10" cy="30" fill="#ff0000" r="10"/>
<circle data-cv-key="B5" cx="30" cy="30" fill="#b22222" r="10"/>
<circle data-cv-key="D1" cx="50" cy="30" fill="#8b0000" r="10"/>
</g>
</svg>И следующие данные:
| ref | cat | цвет | занято | размер |
|---|---|---|---|---|
| A2 | A | 72 | нет | 157 |
| A3 | A | 36 | нет | 684 |
| A4 | B | 12 | да | 325 |
| A5 | B | 22 | нет | 186 |
| B2 | A | 16 | да | 487 |
| B3 | A | 78 | да | 560 |
| B4 | C | 74 | да | 871 |
| B5 | C | 87 | нет | 980 |
| D1 | A | 19 | да | 574 |
Если вы используете этот SVG и перетаскиваете ref в слот данных Расположения, а cat - в слот данных Цвет расположения, то цвет кружков будет отображен в данные о cat.
