在 Power BI 中使用 SVG 增强数据可视化效果
myzbx 2025-04-26 19:40 12 浏览
本文翻译自Umberto Grando的文章—《Supercharge Your Data Visualizations with SVGs in Power BI》来源：Medium 今天，我们将学习如何使用 SVG 在表格中创建内嵌图表。在很多需要将图表的清晰度与表格的细节结合起来的情景下，这是很有用的。
前言
Power BI 是微软提供的一项商业分析服务，允许用户实时分析数据并分享见解。它提供交互式可视化和商业智能功能，界面简单，终端用户可以轻松创建自己的报告和仪表板。Power BI 支持各种数据源和文件格式，包括图像、视频和 SVG。
可缩放矢量图形（SVG）是一种用于矢量图像的文件格式。与 JPEG 或 PNG 等由单个像素组成的光栅图形不同，SVG是通过定义线条、曲线和形状的数学公式创建的。这使得 SVG 可以无限缩放而不会降低图像质量，是数据可视化的理想选择。
在 Power BI 中使用 SVG 可以增强报表和仪表板的视觉吸引力和功能。它们可用于创建自定义图标、徽标和插图。
准备数据集
要创建数据集，请打开一份新报告并选择 "输入数据"：
现在您应该看到一个类似 Excel 文件的界面。在该界面中创建两列 "类别 "和 "值"，并插入以下内容：
现在拖放报告中的两列，你应该会看到如下所示的表格:
现在我们可以开始处理SVG了。
SVG的基本知识
要创建SVG，需要使用HTML标记来定义图像的元素和属性。下面是如何创建一个SVG矩形中嵌套一个圆的例子:
<!DOCTYPE html>
<html>
<head>
<title>My SVG Example</title>
</head>
<body>
<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" style="fill:blue;stroke:black;stroke-width:2"/>
<circle cx="50" cy="50" r="30" fill="yellow" />
</svg>
</body>
</html>
在本例中，我们首先定义 SVG 元素，宽度和高度均为 100 像素。然后，我们创建一个 x 和 y 位置为 10、宽和高均为 80、填充色为蓝色、描边为黑色、描边宽度为 2 的矩形。最后，我们添加一个圆元素，圆心点 (cx, cy) 为 50，半径 (r) 为 30，填充色为黄色。
我们刚刚创建的SVG
如果在网络浏览器中打开这个 HTML 文件，就会看到一个蓝色的矩形，中间有一个黄色的圆圈。您可以通过调整 HTML 代码中的属性，轻松修改矩形和圆形的大小、位置和外观。这种灵活性和易修改性使 SVG 成为在网络上创建自定义图形和数据可视化的强大工具。
既然我们已经为 SVG 创建了代码，那么如何在 Power BI 中实现它呢？
让我们首先使用以下公式创建一个名为“静态SVG”的新度量:
Static SVG = "data:image/svg+xml;utf8,<svg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns#'
xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'>
<rect x='10' y='10' width='80' height='80'
style='fill:blue;stroke:black;stroke-width:2'/>
<circle cx='50' cy='50' r='30' fill='yellow' />
</svg>"
从上面的代码可以看出，我们的 SVG 结构与之前构建的不同。主要有两点不同：
1.代码的第一部分告诉 Power BI，这段文字将是一幅 svg+xml 类型的图像。
2.我们还修改了标题，以定义文档中 SVG 标记的命名空间
现在，如果您尝试将这个字段拖放到您创建的表格中，您将不会看到图片，而是会显示 SVG 的代码：
要显示 SVG，我们需要告诉 Power BI 将此度量值视为 "图像 URL"，方法是选择度量值并将 "数据类别 "更改为 "图像 URL"：
现在，您应该可以看到以下图表：
对于这个可视化，还有最后一件事需要修复。正如您所看到的，图像被裁剪了，这是因为Power BI有一个参数可以设置表内图像的最大大小。为了改变这一点，我们需要进入表格的格式选项，并将“图像大小”部分更改为94x94px:
现在表格应该是这样的：
动态SVG度量
如果您想在表格中插入一个特定的图标，静态 SVG 可能会有所帮助，但我们也可以创建一个动态的度量，它可以根据表格行中使用的值进行更改。
让我们创建一个新度量：
Dynamic SVG =
VAR percComp = AVERAGE(Data[Value])
RETURN
"data:image/svg+xml;utf8,<svg
xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns#'
xmlns:svg='http://www.w3.org/2000/svg'
xmlns='http://www.w3.org/2000/svg'> <rect width='100' height='25' y='10' style='fill:rgb(0,0,200);stroke-
width:3;stroke:rgb(0,0,0)' />
<rect x='" & percComp & "' width='" & 100 - percComp & "' height='25'
y='10' style='fill:rgb(0, 119, 182);stroke-width:3;stroke:rgb(0,0,0)' />
<text x='" & percComp + 10 & "' y='28' fill='white'>" & percComp & "%
</text>
</svg>"
让我们看看代码中发生了什么:
- 我们初始化一个变量，其中包含 “值”列的平均值
- 标题与前面的示例相同。
- 我们的 svg 中有 3 个对象
- 第一个对象是一个宽度为 100、高度为 25 的蓝色矩形。使用 y 参数垂直移动该对象，使其与前面的 SVG 对齐。
- 第二个对象是另一个矩形。这个矩形的颜色是浅蓝色，其 x 位置和宽度是通过 perComp 变量动态生成的。
- 第三个对象是一个文本标签。Y 位置是静态的，而 X 位置则根据条形图的宽度动态变化
一旦您创建了度量，请记住更改数据类型，就像我们在前面的示例中所做的那样。
如果你将新的度量值插入到表格中(如果需要，从格式面板中改变图像大小的宽度)，你现在应该看到一个表格，看起来像这样:
局限性
不幸的是，在Power Bi表中使用svg时有一个很大的限制。目前支持的表内图像的最大尺寸是150x150px。这意味着，如果你需要一个宽度超过150px的图表，即使你改变宽度参数，你也无法创建它。
如果您想深入学习微软Power BI，欢迎登录网易云课堂试听学习我们的“从Excel到Power BI数据分析可视化”系列课程。或者关注我们的公众号（PowerPivot工坊）后猛戳”在线学习”。
长按下方二维码关注“Power Pivot工坊”获取更多微软Power BI、PowerPivot相关文章、资讯，欢迎小伙伴儿们转发分享~
相关推荐
- 怎么恢复7z文件 7z文件删除了怎么恢复
-
7z是一种压缩格式的文件，它运用LZMA压缩算法，该压缩算法的输出稍后被算数编码进行处理以便后续进一步压缩，压缩比十分高。我们可以将文件压缩成这种格式，便于传输，保存，占空间少。了解更多7z文件知识...
- 郎酒让消费者喝得明明白白 算术题里有答案
-
日前，『郎酒酱香产品企业内控准则』颁布，郎酒首次公开酱香产品生产全过程，公布酱香产品产能、储能及投放计划。随后，郎酒官微向消费者发出「品控算术题」有奖问答。郎酒亮出家底，消费者踊跃留言。8天后，谜底揭...
- 学龄前，比识字、算术更重要的是这三件事
-
“为了给孩子选择一家合适的幼儿园，我曾穿梭于纽约各家幼儿园的开放日，这些幼儿员既包括主流的公立幼儿园，还包括那些遥不可及的私人幼儿园。我的目的就是想了解他们的教育理念是什么，到底厉害在哪里，看看对于我...
- 参加CSP-J信奥赛需要掌握数学知识
-
在C++语法的学习中需要储备的数学知识如下①数据类型：需要知道整数、正整数、负整数、小数、判断对错②算术运算符：加法、减法、乘法、除法、取模运算③关系表达式：大于、大于等于、小于、小...
- 1g米饭能做多少深蹲?今天我们来算一算
-
减重我们都知道3分在练，7分在吃，吃这件事情上，真的是每一口都算数。今天我们来算一笔账，1粒米饭可以做多少事情？本着认真负责的态度，今天在食物秤上称了1g米饭，是16粒。根据能量换算：100g米饭是4...
- web 自动化测试，一定得掌握的 8 个核心知识点
-
使用cypress进行端对端测试，和其他的一些框架有一个显著不同的地方，它使用JavaScript作为编程语言。传统主流的selenium框架是支持多语言的，大多数QA会的pytho...
- 大话C语言:赋值运算符（c语言中赋值运算符是什么）
-
赋值运算符是最基本的运算符之一，用于将右侧的值或表达式的计算结果赋给左侧的变量。它是一个二元运算符，意味着它需要两个操作数：一个是目标变量（左侧），另一个是要赋给该变量的值或表达式（右侧）。赋值运算符...
- Vue进阶(幺幺伍):js 将字符串转换为boolean
-
Boolean();参数为0、null和无参数返回false，有参数返回true。Boolean("");//输出为：falseBoolean(null);//输出为...
- mongodb查询的语法(大于，小于，大于或等于，小于或等于等等)
-
1).大于，小于，大于或等于，小于或等于$gt:大于$lt:小于$gte:大于或等于$lte:小于或等于例子：db.collection.find({"field":{$gt:valu...
- Python学不会来打我(21)python表达式知识点汇总
-
在Python中，表达式是由变量、运算符、函数调用等组合而成的语句，用于产生值或执行特定操作。以下是对Python中常见表达式的详细讲解：1.1算术表达式涉及数学运算的表达式。例如：a=5b...
- C|数据存储地址与字节偏移、数据索引
-
话说C是面向内存的编程语言。数据要能存得进去，取得出来，且要考虑效率。不管是顺序存储还是链式存储，其寻址方式总是很重要。顺序存储是连续存储。同质结构的数组通过其索引表示位置偏移，异质结构的结构体通过其...
- 下班后累懵?4 个 JS 手写题帮你搞定前端面试高频考点
-
打工人下班后最痛苦的事，莫过于拖着疲惫的身子还要啃前端面试题吧？看着那些密密麻麻的JS代码，脑子都快转不动了！别担心，今天咱就用轻松的方式，带你吃透4道高频手写题，让你在面试时自信满满，再也不...
- 嵌入式数据库sqlite3【进阶篇】-子句和函数的使用，小白一文入门
-
sqlite在《嵌入式数据库sqlite3命令操作基础篇-增删改查，小白一文入门》一文中讲解了如何实现sqlite3的基本操作增删改查，本文介绍一些其他复杂一点的操作。比如where、orderby...
- 前缀表达式与后缀表达式（前缀表达式后缀表达式中缀表达式计算）
-
昨天晚上和儿子一起学习了前缀表达式和后缀表达式。这应该是字符串算式如何被计算机识别并计算的2种方法。本来是想先给他讲一个逆波兰式（后缀表达式），以后再讲前缀表达式。没想到他还挺聪明，很快就把2个都掌握...
- Python快速入门教程1:基本语法、数据类型、运算符、数字字符串
-
Python3的基础教程，涵盖了基本语法、数据类型、类型转换、解释器、注释、运算符、数字和字符串等内容，并附有使用实例场景。Python3的基础教程，涵盖了基本语法、数据类型、类型转换、解释器、注释、...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 选择器 (30)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)