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表格的模拟效果（数据为虚拟）：

卡片图的度量值如下：

卡片图 = 
VAR SVG =
"data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' height='150' width='150'>
    <text x='0' y='20' font-size='20'>"
        & 这里存放名列，字号小 & "</text>
    <text x='0' y='55' font-size='28' font-weight='bold'>"
        & 这里存放姓列，字号大，且加粗 & "</text>
    <text x='0' y='125' font-size='40' font-weight='bold' fill='red'>"
        & 这里存放数据，红色显示 & "</text>
    <text x='0' y='150' font-size='20'>"
        & 这里存放指标名称（公众号：wujunmin） & "</text>
</svg> "
RETURN
 SVG

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

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

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

条件格式如下设置：

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

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

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