Power BI 卡片图与切片器多指标自由布局

一个卡片展示多个指标有助于辅助对业务状况好坏做出判断，比如主体展示销售业绩，辅助展示目标达成、业绩增长。Power BI卡片图视觉对象可以添加引用标签实现一卡多指标，但是布局不灵活且条件格式设置有限。

按钮切片器视觉对象可以高亮标签的方式添加一个指标，不能多个。

那么，这两个视觉对象如何实现既可以添加多个指标，又可以灵活布局，还可以自由设置条件格式？

答案是DAX驱动可视化，SVG图表度量值实现。把SVG度量值添加到视觉对象的图像区域，本文以按钮切片器为例进行讲解，卡片图视觉对象同理：

先看效果，以下实现了多个指标横排布局，且带有条件格式图标、颜色：

以下实现了横排圆角背景，且带有条件格式颜色：

以下是多指标竖排布局：

以下是网格布局：

以下是混合布局：

无论何种布局，原理均为以下度量值：

SVG多指标原理 = 
"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='50'>
    <foreignObject x='0' y='0' width='500' height='50'>
        <div xmlns='http://www.w3.org/1999/xhtml' style='font-family: Arial; font-size: 20px; text-align: center;'>
            指标内容
        </div>
    </foreignObject>
</svg>"

含义为SVG图像包裹HTML文本。当指标需要单排展示时，可以把上方度量值中的指标内容换位多指标文本串联：

这是最朴素的样式，如需局部添加条件格式颜色，则单独<span>对数据color进行格式设置。

如需添加背景色，style中使用background-color，如加条件格式图标，最简单的是UNICODE符号▲▼，更豪华点的可以是SVG图标。

横向排版如何变为纵向？嵌套一层<p>，指标内容变为：

<p><span 指标1条件格式>指标1名称和指标1度量值</span></p>

<p><span 指标2条件格式>指标2名称和指标2度量值</span></p>

<p><span 指标3条件格式>指标3名称和指标3度量值</span></p>

如何变为网格：

<p><span 指标1条件格式>指标1名称和指标1度量值</span>

<span 指标2条件格式>指标2名称和指标2度量值</span></p>

<p><span 指标3条件格式>指标3名称和指标3度量值</span>

<span 指标4条件格式>指标4名称和指标4度量值</span></p>

如何变为混合：

<p><span 指标1条件格式>指标1名称和指标1度量值</span></p>

<p><span 指标2条件格式>指标2名称和指标2度量值</span>

<span 指标3条件格式>指标3名称和指标3度量值</span></p>

总结就是一行纯<span>换行时加一层<p>。本文技巧也可用在表格、矩阵、图像视觉对象。