Power BI模拟FIFA世界杯球员数据卡片图

FIFA官网有世界杯每场比赛的球员卡片图展示效果，如下图所示。这个布局其实可以在Power BI使用内置表格轻松实现。核心原理是使用SVG矢量图中的文本标签

来源：https://www.fifa.com/fifaplus/en/match-centre/match/17/255711/285075/400128143?date=2022-12-14

在模拟之前首先需要研究该卡片图的结构。整体卡片图分为两个部分，左侧为文本信息，右侧为头像。文本信息又可以分为两部分：上方的姓名和下方的数据。

姓名的细节在于，名字号相对较小，姓字号相对较大，且进行了加粗；数据的细节在于数据大小颜色为红色，且进行了加粗。以下是Power BI表格的模拟效果（数据为虚拟）：

卡片图的度量值如下：

代码语言：javascript复制卡片图 =

VAR SVG =

"data:image/svg+xml;utf8,

"

& 这里存放名列，字号小 & "

"

& 这里存放姓列，字号大，且加粗 & "

"

& 这里存放数据，红色显示 & "

"

& 这里存放指标名称（公众号：wujunmin） & "

"

RETURN

SVG把该卡片图度量值标记为图像URL，和头像列放入表格即完成设置。

可以看到，这个卡片图仅仅使用了text一个标签，通过变化格式和位置达到使用目的，读者在后期自定义卡片图时可直接复用。人物头像可以是网址URL，也可以是本地图片转换为BASE64。

这个效果还有点缺憾，人物头像能不能加上所属队伍图标？可以的。这里采用了图像叠加图像的技巧，人物头像列置于表格列，旗帜列置于人物头像列的条件格式图标。

条件格式如下设置：

以上文本是左对齐，右对齐也是可以的：

本文配套pbix文件包含下图三种模式，在下方知识星球下载，直达链接（可左下角阅读原文访问）：

https://t.zsxq.com/09ZRjHfZj