加入 PowerBI自己学 知识星球：下载源文件，边学边练；遇到问题，提问交流，有问必答。

在数据大屏或空间有限的报告页面中，使用自动滚动的表格可以显示更多的信息，适合展示有限行数的排名数据等。

解决方案

在PowerBI中，使用HTML Content(Lite)三方视觉对象可以实现自动滚动表格的效果。关键在于生成html代码，先生成静态表格，包含表头和内容两部分，然后为内容配上动画效果，支持调节滚动速度。

操作步骤

使用如下数据，在5行（总行数的一半）的空间范围内，滚动显示10行排名数据。

STEP 1 点击获取更多视觉对象，搜索html，添加带PowerBI认证蓝标的HTML Content(Lite)视觉对象。

STEP 2 书写基础度量值（数量、排名）和html度量值，在画布中添加HTML Content(Lite)视觉对象，然后把html度量值拖放到视觉对象的Value中。

Qty = SUM('表'[数量])

Rank = RANK(DENSE, ALLSELECTED('表'[国家]), ORDERBY([Qty], DESC))

静态表格部分的代码如下，该部分使用了计算表函数SUMMERIZECOLUMNS、ADDCOLUMS和文本连接函数

-- 汇总数据：国家、数量、排名

VAR _t1 =

SUMMARIZECOLUMNS(

'表'[国家],

"数量", [Qty],

"排名", [Rank]

)

-- 添加 HTML 行（SVG 字段实际为 HTML tr 字符串）

VAR _t2 =

ADDCOLUMNS(

_t1,

"svg",

"<tr>" &

"<td style='border: 1px solid #ddd; padding: " & _padding & "; font-size: " & _fontsize & "; text-align: center; word-wrap: break-word;'>" & [排名] & "</td>" &

"<td style='border: 1px solid #ddd; padding: " & _padding & "; font-size: " & _fontsize & "; text-align: center; word-wrap: break-word;'>" & [国家] & "</td>" &

"<td style='border: 1px solid #ddd; padding: " & _padding & "; font-size: " & _fontsize & "; text-align: center; word-wrap: break-word;'>" & FORMAT([数量], "#,##0") & "</td>" &

"</tr>"

)

-- 列宽定义

VAR _cols =

"<col style='width: " & _width1 & ";'>" &

"<col style='width: " & _width2 & ";'>" &

"<col style='width: " & _width3 & ";'>"

-- 表头（包含样式和列定义）

VAR _header =

"<table style='width: 100%; table-layout: fixed; border-collapse: collapse; background-color: " & _headercolor & "; color: white;'>" &

_cols &

"<thead>" &

"<tr>" &

"<th style='border: 1px solid #ddd; padding: " & _padding & "; font-size: " & _fontsize & "; text-align: center;'>排名</th>" &

"<th style='border: 1px solid #ddd; padding: " & _padding & "; font-size: " & _fontsize & "; text-align: center;'>国家</th>" &

"<th style='border: 1px solid #ddd; padding: " & _padding & "; font-size: " & _fontsize & "; text-align: center;'>数量</th>" &

"</tr>" &

"</thead>" &

"</table>"

-- 合并所有行内容

VAR _bodyRows = CONCATENATEX(_t2, [svg])

滚动部分的代码：

VAR _body =

"<div class='scrolling-container' style='height: " & (_totalHeight / 2) & "px; overflow: hidden; position: relative;'>" &

"<div class='scrolling-content' style='position: absolute; top: 0; left: 0; width: 100%;" &

"animation: scroll-up " & _duration & "s linear infinite; " &

"animation-play-state: running;'>" &

"<table style='width: 100%; table-layout: fixed; border-collapse: collapse;'>" &

_cols &

"<tbody>" &

"<tr><td colspan='3' style='height: 0; padding: 0; border-top: 1px solid #ddd; border-bottom: none;'></td></tr>" &

_bodyRows &

"<tr><td colspan='3' style='height: 0; padding: 0; border-top: none; border-bottom: 1px solid #ddd;'></td></tr>" &

"</tbody>" &

"</table>" &

"</div>" &

"</div>"

整合动画效果的代码：

-- 完整表格容器（含边框、圆角等）

VAR _table =

"<div class='table-wrapper' style='width: 100%; border: 1px solid #ddd; border-radius: 4px; overflow: hidden; font-family: Arial, sans-serif;'>" &

_header &

_body &

"</div>"

-- 定义 CSS 动画

VAR _style =

"<style>

@keyframes scroll-up {

0% { transform: translateY(0); }

100% { transform: translateY(-" & _totalHeight & "px); }

}

</style>"

-- 返回最终结果：样式 + 表格

RETURN

_style &

"<div style='width: 100%; display: block;'>" &

_table &

"</div>"

STEP 3 在视觉对象筛选器中放入国家，高级筛选，选择数量的前10名。

结果如下：

拓展

更多细节的需求继续自行调整代码。如果对代码不熟悉，可以使用AI工具（通义千问、DeepSeek、Chat GPT等），通过问答的方式协助调整代码，AI工具能帮助调整代码并指出对应的知识点，特别适合代码的相关学习。建议小部分微调，不要整篇复制代码，有可能导致不能输出结果。如下是使用通义千问调整表头的背景色：