Power BI模拟FIFA世界杯球员数据卡片图-兼谈任意卡片图的制作
2023-06-13 09:15:17 时间
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
相关文章
- 设计分享|单片机LED模拟交通灯
- 清北学堂模拟赛d3t6 c
- 用COPULA模型进行蒙特卡洛(MONTE CARLO)模拟和拟合股票收益数据分析|附代码数据
- 用COPULA模型进行蒙特卡洛(MONTE CARLO)模拟和拟合股票收益数据分析|附代码数据
- Copula估计边缘分布模拟收益率计算投资组合风险价值VaR与期望损失ES|附代码数据
- [TMLR | 论文简读] GemNet-OC:开发用于大型和多样化的分子模拟数据集的图神经网络
- 【strlen】三种方法模拟实现strlen字符串函数
- C++STL——list类与模拟实现
- 【Android 逆向】Android 逆向方法 ( 静态逆向解析 | 函数调用分析 | 动态运行跟踪 | 运行日志分析 | 文件格式解析 | 敏感信息分析 | 网络信息监控 | 环境伪装模拟 )
- Kafka Tool模拟数据发送
- PYTHON 用几何布朗运动模型和蒙特卡罗MONTE CARLO随机过程模拟股票价格可视化分析耐克NKE股价时间序列数据|附代码数据
- 轻量级的 jQuery 模拟弹出窗插件:Pop Easy
- 利用HtmlUnit 模拟浏览器抓取网页数据详解编程语言
- 串口数据抓取及串口通信模拟
- 使用模拟SQL Server加速系统开发进程(模拟 sqlserver)
- 模拟Redis雪崩测试和预防(模拟redis雪崩)
- 特性模拟 Redis 的强大特性体验之旅(模拟redis)
- 探索Redis异常的模拟方法(如何模拟redis异常)
- javascript获取多条数据(模拟ajax获取数据)
- js排序动画模拟冒泡排序
- python之模拟鼠标键盘动作具体实现
- windows下python模拟鼠标点击和键盘输示例
- PHP函数分享之curl方式取得数据、模拟登陆、POST数据