所谓层级图表是一种分支结构,例如以下分解树同时展示了城市和店铺两个层级。

上方是内置的分解树,采总近日介绍了一款第三方的分解树,功能也非常强大。

第二种多层级显示的视觉对象是矩阵,矩阵的行拖入多个维度,打开总计可以双层或者多层同时展示。

借助SVG可以把矩阵的值变为表格嵌入型图表:

第三种是昨天分享的《Power BI DAX制作折叠与展开效果》的深化应用,文本效果如下:

实现的原理依然是这五行度量值:
M.HTML1 =
"<details>
<summary>主信息</summary>
<p>展开的明细信息</p>
</details>"本例在<summary>放入城市维度,在<p>放入店铺维度,完整度量值如下:
M.HTML9 =
"<details style='font-size: 20px;'>
<summary style='padding-left: 0.2em;font-weight: bold;background-color: rgb(17, 120, 101);color: white;display: list-item;'>" &
SELECTEDVALUE('店铺资料'[城市]) & " "
& FORMAT ( [M.业绩达成率], "0%" ) & "</summary>
<p style='padding-left: 2em;'>"
& CONCATENATEX (
VALUES ( '店铺资料'[店铺名称] ),
[店铺名称] & " <span style='color:"
& IF ( [M.业绩达成率] >= 1, "black", "red" ) & "'>"
& FORMAT ( [M.业绩达成率], "0%" ) & "</span>",
"<br>",
[M.业绩达成率], DESC
) & "
</p>
</details>"HTML Content视觉对象如下设置:

相同的道理,文本可以换为SVG图表,以下两个层级都使用了进度条:

以下店铺层级使用了进度条,人员使用了词云热力图:

总体来说,分解树和常规矩阵操作最容易;矩阵嵌套SVG稍微费点神,本公众号分享了非常多SVG案例;HTML Details只展示文本也很容易,嵌套图表还是需要SVG。