提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

Power BI滚屏实战：人员业绩达成滚动播放

2023-02-18 16:27:11 时间

上文分享了在Power BI实现无限滚动循环播放的原理（Power BI 无限滚屏效果（适用于地图、卡片图滚动等）），本文是一个实战应用——人员业绩达成滚动播放，效果如下动画所示：

动画中，人物头像上方加了一个百分比条形图，显示业绩达成状况，条形样式模拟B站风格，且可以设置条件进行颜色区分。实现的方式是度量值嵌入SVG矢量图。

首先准备好人物资料，比如包含人员ID、姓名、头像、业绩状况等。头像可以是网络链接，也可以是本地图像（Power BI 批量导入本地产品、人物照片），示例是本地照片转码BASE64。

接着新建以下度量值，将度量值放入HTML Content视觉对象，即可实现滚屏效果：

SVG滚动百分比条形图-横向 = 
VAR Item_Count =
    DISTINCTCOUNT ( '表'[ID] )
VAR IndexTable =
    ADDCOLUMNS (
        SUMMARIZE ( '表', '表'[ID], '表'[头像] ),
        "索引", RANKX ( ALLSELECTED ( '表' ), [达成率] )
    )
VAR SVG =
    CONCATENATEX (
        IndexTable, "
<image xlink:href='" & [头像] & "'  x='" & 100 * ( [索引] - 1 ) & "' y='15' width='100' height='100'/>
<rect rx='2' x='" & 100 * ( [索引] - 1 ) + 10 & "' y='5' width='80' height='5' fill='Lightgrey'/>             <rect rx='2' x='" & 100 * ( [索引] - 1 ) + 10 & "' y='5' width='"
            & 80
                * IF ( [达成率] < 0, 0, IF ( [达成率] > 1, 1, [达成率] ) ) & "' height='5' fill='"
            & IF ( [达成率] >= 0.8, "#4BAAE5", "#EC6F9A" ) & "'/>"
    )
RETURN
"<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 " & 100 * Item_Count & " " & 115 & " ' >
<defs><g id='wujunmin'>" & SVG & "</g></defs>
<use href='#wujunmin'>
<animate attributeName='x' from='0' by='" & Item_Count * 100 & "' begin='0s' dur='10s' repeatCount='indefinite'/>
</use>
<use href='#wujunmin'>
<animate attributeName='x' from='" & -1 * Item_Count * 100 & "' by='" & Item_Count * 100 & "' begin='0s' dur='10s' repeatCount='indefinite'/>
</use>
</svg> "

DAX粘贴到公众号代码排版有时会丢失

前期讲原理的时候是单张图片的滚屏，这里使用SVG中的g标签对一组图片（头像、条形）进行了打包，将打包后的图形进行统一滚屏。示例中，对业绩达成率达到一定值进行了条形颜色变换，读者实际应用时可自行替换。

代码中的参数可以灵活调整，自由打包图形组合进行滚屏，比如加上姓名：

比如变为竖屏：

相关文章