首页

当前位置：网站首页 > 技术文章 > 正文

在 Power BI 中使用 SVG 增强数据可视化效果

myzbx 2025-04-26 19:40 32 浏览

本文翻译自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'/>

</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相关文章、资讯，欢迎小伙伴儿们转发分享~

SVG 矩形

上一篇：零基础教你学前端——44、矩形、圆形和椭圆形
下一篇：学下SVG矢量图形，你也是个小小艺术家!

在 Power BI 中使用 SVG 增强数据可视化效果

本文翻译自Umberto Grando的文章—《Supercharge Your Data Visualizations with SVGs in Power BI》来源：Medium 今天，我们将学习如何使用 SVG 在表格中创建内嵌图表。在很多需要将图表的清晰度与表格的细节结合起来的情景下，这是很有用的。

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿