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

本文链接：https://blog.youkuaiyun.com/pbi_zijixue/article/details/148021602

加入 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 Background = "<rect x='0' y='2' width='" & Width_Rect & "' height='" & Height_Rect-2 & "' fill='LightGrey'/> "
VAR ProgressBar = "<rect x='0' y='2' width='" & Width_Rect * IF(Pct>1,1,Pct) & "' height='" & Height_Rect-2 & "' fill='" & Color &"'/> "
VAR Line_Table =
ADDCOLUMNS(
GENERATESERIES(1, Number_Line, 1),
"Line", "<use href='#vLine' x='"& ((Width_Rect-Number_Line*Width_Line)/Number_Piece+Width_Line)*[Value]-Width_Line/2 &"'/>"
)
VAR Line =
"<g stroke='white' stroke-width='" & Width_Line & "'>
<defs>
<line id='vLine' y1='0' y2='" & Height_Rect & "' />
</defs> " & CONCATENATEX(Line_Table, [Line], " ")
&"</g>"
VAR SVG = "data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='" & Width_Rect & "' height='" & Height_Rect & "'>" & Background & ProgressBar & Line & "</svg>"
RETURN
SVG