Power BI 模拟tableau卡片图

在tableau官网看到一种图标在边框之外的卡片图，如下图所示，Power BI可否实现同样的效果？

来源：https://public.tableau.com/app/profile/mazeenmuhammed/viz/FitBit_16532927278840/FitnessStatistics

Power BI今年推出的新卡片图视觉对象可以添加图标，但图标只能放在卡片内部，无法突破边框。

打开卡片图的图像位置设置，可以看到图标位置只能在卡片图内部的上下左右四个方向，没有tableau示例的那种斜向上45度角，更没有置于边框上一说。

但是，我还是把这种效果实现了：

最简单的方法是叠图，即卡片图和图标是两个视觉对象载体，把图标的视觉对象放在卡片图左上方即可。有5个卡片图就放5个卡片对应的图标。

这种方式的优点是不需要学习成本，缺点是视觉对象加载需要加倍。另外，排版如果发生变化，可能还需要挨个重新调整。最后还有个根本问题，卡片数量不固定，每个卡片要求图标/图像不一样怎么办？例如下方的卡片显示每个人物的业绩状况，且分别带有头像。

遇事不决SVG。把整个卡片用SVG重构可以解决以上所有问题。如果是固定图标，卡片度量值是如下逻辑（具体的SVG标签rect、text语法网上资料很多，大家可以自行检索，此处只讲逻辑）：

图标的代码哪里获得？B站我的视频搜索“查询系统”我分享了6000多种图标样式供你使用。图标如何正好在左上角？这需要进行空间营造。如果你的图标大小是24*24，整个画布空间就需要长宽都比24大，比如宽度100，高度50。图标之外的空间用来存放指标的数值。

度量值中的rect用于绘制一个矩形，即上方示例的灰色底纹。rect的边长略小于画布空间，使得左上角的图标和线条有交叉。

text正常居中存放。把完成后的度量值放入新卡片图的图像URL，并关闭新卡片图的标签标注。下图可以看到新卡片图实际占地面积会大于视觉显示面积，就是因为上方进行了留白，为了让图标溢出。

如果需要动态切换图标（如人物头像），原理一致，只是需要将图标代码替换为base64图片,头像的高度宽度值需要远小于画布。

因动态图标卡片数量的不确定性，因此不宜采用新卡片图展示，矩阵比较合适：

上方均为左侧溢出展示，中间上方溢出、右侧溢出是相同的道理，调整溢出对象的横坐标即可。