Power BI DAX制作折叠与展开效果

wujunmin

发布于 2025-02-10 16:45:54

9400

代码可运行

文章被收录于专栏：wujunminwujunmin

运行总次数：0

代码可运行

DAX驱动可视化

Power BI使用内置功能制作折叠展开效果是繁琐与困难的，但是有DAX，我们可以使用五行度量值自行实现基础的折叠与展开。新建一个度量值：

M.HTML1 = 
"<details>
<summary>主信息</summary>
<p>展开的明细信息</p>
</details>"

把度量值放入HTML Content视觉对象的Values，得到：

界面上只显示了度量值中<summary>中的文字，点击文字，可以看到展开的详细信息：

基于这个原理可以进行很多升级，例如在detail层级指定样式时，样式对主信息和展开信息都生效，也可单独对主信息和展开的信息分别制定样式。这里对整体指定字号大小，对主信息加粗，对明细信息施加红色：

M.HTML2 = 
"<details style='font-size: 20px;'>
<summary style='font-weight: bold;'>主信息</summary>
<p style='color: red;'>展开的明细信息</p>
</details>"

显示效果如下：

接下来实际应用，比如主信息为整体业绩，明细信息为各城市业绩：

M.HTML3 = 
"<details style='font-size: 20px;'>
<summary style='font-weight: bold;'>总销售业绩："
    & FORMAT ( [M.销售业绩], "#,#元" ) & "</summary>
<p>分城市看，"
    & CONCATENATEX (
        VALUES ( '店铺资料'[城市] ),
        [城市] & FORMAT ( [M.销售业绩], "#,#元" ),
        "，",
        [M.销售业绩], DESC
    ) & "
</p>
</details>"

效果如下：

再次升级，比如业绩达成率这个指标，需要对低于100%的数据单独红色提示：

M.HTML4 = 
"<details style='font-size: 20px;'>
  <summary style='font-weight: bold;'>总体业绩达成率："
    & FORMAT ( [M.业绩达成率], "0%" ) & "</summary>
  <p>分城市看，"
    & CONCATENATEX (
        VALUES ( '店铺资料'[城市] ),
        [城市] & "<span style='color:"
            & IF ( [M.业绩达成率] >= 1, "black", "red" ) & "'>"
            & FORMAT ( [M.业绩达成率], "0%" ) & "</span>",
"，",
        [M.业绩达成率], DESC
    ) & "
  </p>
</details>"

效果如下：

也就是说在<p>内部，可以加入<span>进行长文本的局部格式修改。

继续升级，增加换行效果：

M.HTML5 = 
"<details style='font-size: 20px;'>
<summary style='font-weight: bold;'>总体业绩达成率："
    & FORMAT ( [M.业绩达成率], "0%" ) & "</summary>
<p>其中<br>"
    & CONCATENATEX (
        VALUES ( '店铺资料'[城市] ),
        [城市] & "<span style='color:"
            & IF ( [M.业绩达成率] >= 1, "black", "red" ) & "'>"
            & FORMAT ( [M.业绩达成率], "0%" ) & "</span>",
        "<br>",
        [M.业绩达成率], DESC
    ) & "
</p>
</details>"

成果如下，原理为CONCATENATEX串联文本时，连接符使用HTML的换行符<br>。

以上是纯文本操作，实际上还可以嵌入SVG图表。以下默认是一行文字，点击文字展开是图表。

度量值为：

<details style='font-size: 20px;'>
<summary style='font-weight: bold;'>总体业绩 ："
    & FORMAT ( [M.销售业绩], "#,#" ) & "</summary>"
    & SVGChart & "
</details>

这里SVGchart可以任意自定义，我的公众号和知识星球分享了全球最丰富的Power BI SVG图表，都可以尝试加入。再举个例子：