Power BI 切片器控制页面布局
假设一个Power BI页面有三个模块，上方是一组卡片显示整体数据，中间是柱形图展示门店数据，最下方是表格展示员工数据。
通过切片器可以控制这三个模块的显示状态。默认全部显示，页面比较长，需要滚动条下滚：
点击切片器的总计，页面只显示卡片图：
总计和门店多选，卡片图和柱形图同时出现：
总计和员工多选，卡片图和表格同时出现：
单选和多选可以各种组合，Power BI内置书签很难做到这样的效果。本文介绍DAX结合HTML的实现方式。
首先，将当前页面的所有图表（除切片器）度量值化，度量值的基本结构为：
HTML页面="
<head>
<style>页面装修样式</style>
</head>
<body>
<div>卡片图模块</div>
<div>柱形图模块</div>
<div>表格模块</div>
</body>"
页面装修使用CSS，图表使用HTML或者SVG，这些都不懂也没关系，有请DeepSeek，以下是一个示例：
图片
第二条非常重要，生成常规的条形图、柱形图、折线图、饼图等图表时指定实现的技术手段，这里推荐SVG矢量图（想更多了解SVG参考Power BI SVG制图入门知识2025版），HTML页面可以内嵌SVG。如果不指定实现方法，AI大概率会调用各种JS图表库，这会导致加载缓慢或者加载失败。
多轮对话效果满意后，把生成的代码放在记事本，双引号替换为单引号，放入一个空白度量值：
图片
将度量值放入HTML Content视觉对象，得到固定数据的看板：
图片
接着，修改HTML度量值，把固定数据替换为和模型关联的维度、指标。
卡片图比较简单，直接将数据替换为对应指标，Fotmat函数规范格式：
图片
柱形图、表格的维度因子数量不固定，需要使用CONCATENATEX函数串联柱子或者表格行，样例参考Power BI HTML 表格的四大优势
图表制作完成后设置切换动作。建模选项卡下新建表格：
输入公式：
页面模块表 =SELECTCOLUMNS({("总计",1),("门店",2),("员工",3)},"页面位置",[Value1],"索引",[Value2])
得到：
把DeepSeek辅助生成的HTML度量值变更为以下结构：
HTML页面=
VAR div1="<div>卡片图模块</div>"
VAR div2="<div>柱形图模块</div>"
VAR div3="<div>表格模块</div>"
RETURN
"<head>
<style>页面装修样式</style>
</head>
<body>"
& CONCATENATEX(ADDCOLUMNS('页面模块表',"DIV",SWITCH([页面位置],"总计",div1,"门店",div2,"员工",div3)),[DIV],,[索引],ASC) &
"</body>"
调整完的HTML度量值放入HTML Content视觉对象：
页面位置字段放入切片器：
实际应用时，模块组可以不止三个，每个模块中的图表也不一定要相同，<div></div>中可以嵌套子div，子div为不同类型的图表。
本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2025-09-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
