Power BI卡片图添加下划线

wujunmin

发布于 2023-09-05 14:57:35

24300

代码可运行

文章被收录于专栏：wujunminwujunmin

运行总次数：0

代码可运行

本文是Power BI新卡片图系列第六篇文章，前五篇如下，视频教程也在连载中。

Power BI 2023年6月推出的卡片图当前不支持下划线，使用SVG度量值我们可以进行手动添加，以突出展示指标好坏。例如，业绩未达成显示红色下划线。

制作下划线最简单的方式是使用PPT画一个，另存为SVG格式。其次可以在各种SVG图标库搜索下划线（例如阿里巴巴矢量图标库https://www.iconfont.cn/）

用记事本打开波浪线SVG图片，可以看到长串的代码，把代码复制到Power BI空白度量值，前面加上data:image/svg+xml;utf8,

找到代码中的fill，即填充色，替换为条件格式，本例业绩达成率大于1显示绿色，否则红色。

将这个SVG度量值作为图像URL，放入新卡片图的下方，即可实现需要的效果。

如果觉得图标库的选择有限，不妨使用DAX画一个，下图右侧使用DAX绘制：

DAX手工下划线度量值如下，改变度量值中MaxValue的值可以变化波浪线的疏密程度。

SVG.波浪线手工版 = 
VAR MaxValue = 51
VAR t =
    GENERATESERIES ( 1, MaxValue )
VAR lines =
    CONCATENATEX (
        ADDCOLUMNS (
            t,
            "x",
                ( [Value] - 1 ) * 100 / MaxValue,
            "y", IF ( MOD ( [Value], 2 ) = 0, 5, 0 )
        ),
        [x] & "," & [y],
        " ",
        [Value]
    )
VAR SVG =
    "data:image/svg+xml;utf8,
    <svg xmlns='http://www.w3.org/2000/svg' width='100' height='10'>
    <!--微信公众号、知乎:wujunmin-->
        <polyline fill='none' 
          stroke='red' 
          stroke-width='1' points='" & Lines & "'
        />
    </svg>"
RETURN
  IF ( [M.业绩达成率]<1,SVG )

最后还有一个高阶玩法，上方的度量值稍微修改，可以实现波浪线长短自动变化，下方店铺名称的波浪线按照字数多少自动调整。读者可以思考下怎么做到的。