原创： 2024-03-25 20:01
前言
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相关文章、资讯，欢迎小伙伴儿们转发分享~
