Power BI 一行度量值自定义进度条

wujunmin

发布于 2025-02-10 16:57:46

5800

代码可运行

文章被收录于专栏：wujunminwujunmin

运行总次数：0

代码可运行

上文实现了Power BI 一行度量值绘制条形图，今天继续这个话题，一行度量值绘制进度条。

新建一个HTML的<p>标签度量值：

M.P.进度条原型 = "<p style='background: linear-gradient(to right, deepskyblue 50%, lightgrey 0);'>wujunmin 50%</p>"

只有一行。把度量值放入HTML视觉对象，得到：

为什么可以显示为进度条？这里的原理是为<p>进行渐变颜色填充，填充方向为向右，前50%为蓝色，后面为灰色。

加一个<p>可以看到百分数的部分如果插入度量值即可生成动态进度条：

接下来实战，以业绩达成率为例，

M.P.进度条1 = 
"<p style='font-size: 20px;background: linear-gradient(to right, deepskyblue " & FORMAT([M.业绩达成率],"0%") & ", lightgrey 0); white-space: nowrap;'>" & SELECTEDVALUE('店铺资料'[城市]) & " " & FORMAT([M.业绩达成率],"0%") & "</p>"

HTML Content视觉对象拖入上方的度量值和维度：

得到：

接着可以进行格式优化，比如加入圆角命令border-radius：

M.P.进度条2 = 
"<p style='font-size: 20px;background: linear-gradient(to right, deepskyblue " & FORMAT([M.业绩达成率],"0%") & ", lightgrey 0);border-radius: 20px;white-space: nowrap;padding-left: 5px;'>" & SELECTEDVALUE('店铺资料'[城市]) & " " & FORMAT([M.业绩达成率],"0%") & "</p>"

得到：