PowerBI报告可视化-新卡片图配上带空白间隔的SVG进度条

原创已于 2025-05-24 16:49:26 修改 · 777 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#powerbi #数据可视化 #数据分析

于 2025-05-17 07:21:00 首次发布

PowerBI进阶专栏收录该内容

6 篇文章

订阅专栏

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

新卡片图支持插入图片，图片可以使用静态的图片用作图标等装饰，还可以使用动态的SVG用作红绿灯、趋势线、进度条等。如下就是使用SVG生成的进度条，配上红黄绿条件颜色，可以让卡片图变得更加直观生动。

操作步骤

STEP 1 在画布中插入新卡片图，将百分比的度量值拖入视觉对象。

STEP 2 新建度量值，复制粘贴如下代码，生成SVG图形的度量值，并在菜单栏度量工具下，将数据类别调整为图像URL。

SVG_ProgressBar_Line =

VAR Pct = [Ach% 值] //度量值

VAR Width = 250 //宽度

VAR Heitht = 20 //高度

VAR Color = IF(Pct>=1,"Green",IF(Pct>=0.8,"Orange","Red")) //根据比率大小设定红黄绿颜色

Var Graph ="

<line x1='0' y1='0' x2='" & Width & "' y2='0' stroke='LightGrey' stroke-width='" & Heitht*2 & "' stroke-dasharray='5'/>" &

"<line x1='0' y1='0' x2='" & Width*Pct & "' y2='0' stroke='" & Color & "' stroke-width='" & Heitht*2 & "' stroke-dasharray='5'/>"

RETURN "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width= '" & Width & "' height= '" & Heitht & "' >" & Graph & "</svg>"

STEP 3 选中卡片，在可视化窗格的格式中，打开图像开关，映像类型选择图像URL，点击fx，选择刚刚写好的SVG度量值，继续在格式中将位置改为文本下方。

结果如下，可以根据卡片大小调整SVG中的代码。

拓展

这样做的进度条是由虚线生成的，小块的宽度和空白间隙是等宽不可调节的，如果想根据需要自定义小块宽度和空白间隙的宽度，可以使用矩形和竖线组合成进度条，需要按照竖线的数量调整竖线的相关代码。

SVG代码如下：

SVG_ProgressBar_Customized =

VAR Pct= [Ach% 值]

VAR Width_Rect = 250 //条形长度

VAR Height_Rect = 20 //条形高度

VAR Number_Piece = 30 //小块数量

VAR Width_Line = 3 //竖线宽度

VAR Number_Line = Number_Piece-1

VAR Color = IF(Pct>=1, "Green", IF(Pct>=0.8, "Orange", "Red")) //根据比率大小设定红黄绿颜色

Var Graph =

//底纹条形

"<rect x='0' y='2' width='" & Width_Rect & "' height='" & Height_Rect-2 & "' fill='LightGrey'/>" &

//比率条形

"<rect x='0' y='2' width='" & Width_Rect * IF(Pct>1,1,Pct) & "' height='" & Height_Rect-2 & "' fill='" & Color &"'/>" &

//白色竖线，按照小块数量-1调整下面的行数

"<g stroke='white' stroke-width='" & Width_Line & "'>

<defs>

</defs>

<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*1-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*2-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*3-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*4-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*5-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*6-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*7-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*8-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*9-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*10-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*11-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*12-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*13-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*14-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*15-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*16-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*17-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*18-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*19-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*20-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*21-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*22-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*23-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*24-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*25-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*26-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*27-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*28-Width_Line/2 &"'/>" &

"<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*29-Width_Line/2 &"'/>

</g>"

VAR SVG = "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='" & Width_Rect & "' height='" & Height_Rect & "'>" & Graph & "</svg>"

RETURN

SVG