Power BI 3D丝带卡片图

上一节分享了《Power BI 丝带式排名卡片图》，今天继续丝带卡片的话题，样式是全包裹式。如果用在新卡片图视觉对象，表现为指标名称在丝带上，数据在卡片主体上。

如果用在新切片器视觉对象，表现为维度在丝带上，维度对应的数据在切片器主体上。

实现这个过程使用了SVG图片，但是读者却不需要了解SVG代码知识也能复刻。

以下是SVG代码：

<svg id='wujunmin' xmlns='http://www.w3.org/2000/svg' width='200' height='100'><path d='M10 0L190 0 190 100 10 100Z' fill='lightgrey'/><path d='M0 10L0 40 200 40 200 10Z' fill='rgb(17,120,101)'/><path d='M0 40L10 40 10 50Z' fill='rgb(26,86,82)'/><path d='M190 40L200 40 190 50Z' fill='rgb(26,86,82)'/></svg>

配色修改

这段代码通过SVG path标签绘制了灰色的卡片，绿色的丝带。读者很可能有修改颜色的需求。接下来介绍三种方式进行调整。

首先，可以直接代码中找到lightgrey，rgb字样，进行颜色替换，颜色可以是英文名称，rgb或者十六进制。

第二种方式，搜索一个SVG在线编辑器，例如这个：

https://www.jyshare.com/more/svgeditor/

新建一个空白文件，在视图下点击源代码，复制上方的SVG，即可看到我创建的SVG图片样式，在线可以任意点击修改颜色。修改完成后，点击文件按钮下的“保存图片”，以待后用。

第三种方式，将以上SVG代码保存在一个空白的SVG文件中，PPT打开SVG文件，编辑颜色，再另存为图片到本地。

除了颜色，丝带的位置也可以在SVG在线编辑器或者PPT拖动调整。

导入图片

通过以上操作，我们对丝带卡片配色进行了适配，接下来在视觉对象导入图片。

新卡片图视觉对象拖入需要展示的指标，在背景选项卡下选择修改后的丝带SVG图片，图像匹配度选择匹配度。

通常情况下，显示效果很尴尬：

这个时候需要进行两个操作，首先是调整好数据和指标名称的文本大小、颜色，接着加大标签和值之间的空格，使得指标名称正好位于丝带上。

新切片器视觉对象拖入需要展示的维度，并将标签打开，标签拖入需要展示的指标。

填充背景图像插入丝带SVG图片：

同新卡片图一样，调整文本大小、颜色，标签和值之间的空格：

以上都是无代码操作，如果需要在表格矩阵展示丝带卡片，需要一点点SVG知识，可以在源代码基础上加入text标签。本文配套练习文件在下方知识星球分享。