PowerBI 从矩阵Sparkline揭示SVG图形通用技巧

近日，PowerBI已经更新为度量值可以支持作为图像URL来进行解析，参考：PowerBI 2018 8月更新 一键导出PDF报告集合，这使得PowerBI在显示图标方面有了更多的可能性，本文来详细探讨这些可能性。

显示Sparkline

由于可以将度量值设置为图像URL，如下：

在矩阵中就可以显示由SVG形成的Sparkline效果：

问题来了：

• 什么是SVG？
• 这个Sparkline是度量值算出来的？Are you kiding me？
• 那怎么算的？

本文将一步步来详细解释这些问题。

PowerBI 解析图形图像的原理

由于PowerBI是基于标准的Web技术，也就是兼容包括Html5等W3C定义的Web标准构建的，这里不去深究，只要知道其实在PowerBI里可以显示：

• 网页图片
• 网页音频
• 网页视频

当然包括本文要说明的SVG图形。关键就在于一招：

关键在于：要明确告诉PowerBI系统你要显示的是什么，这在我们的基础系列教程里已经说明得很清楚，例如：地图、图像都是这样，这里就不再重复。

简单理解 SVG

SVG是什么鬼，在现在的Web世界中越来越凸显这一标准的优势。关于SVG，我们只需要知道一件重要的事情即可：

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML 格式定义图像。

从这点我们就可以知道SVG是可以通过文本来定义图形的。（XML也是文本，只不过是按照某种约定编写的文本，好让浏览器知道如何把文本解析成图形）

SVG的好处包括：

• SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
• SVG 用来定义用于网络的基于矢量的图形
• SVG 使用 XML 格式定义图形
• SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
• SVG 是万维网联盟的标准
• SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

越来越多的网站开始把logo之类的图标制作成SVG格式。

SVG 举例

如果不给出答案，你可以猜到这个是什么吗？

这其实就是我们天天看到的：

由于这是纯文本定义出来的矢量图形，它可以在任何能够理解SVG标准的浏览器或设备上高清地显示。

PowerBI 官网的 SVG 图标

不出意外，一些大型专业的网站都会使用SVG图形，PowerBI显然在此之列，我们在官网用查看元素去找到PowerBI的Logo就可以看到：

它们不是图片，而是直接在网页中用SVG定义出来的：

可以看出，这里完全使用文本定义出了PowerBI的Logo。

PowerBI 适用 SVG 面临的问题

喜欢研究的伙伴可以搜索更多的资料，但这里将直接说明在PowerBI中是如何应用 SVG 的，那我们要回答：

• 在PowerBI中如何适用 SVG
• 如何从web下载 SVG 图片并显示在PowerBI中
• 如何将任意图片（png，jpg等）转为 SVG 并在PowerBI中显示
• 如何自己制作 SVG 并在PowerBI中显示
• 如何通过 PowerBI 度量值动态计算 SVG 数据实现动态显示（Sparkline）

我们将依次解释上述一连串问题，这也是符合一步步探索的自然而然的问题。

PowerBI 使用 SVG 的技巧

如果已经拥有了一张 SVG 图片，例如刚刚的 Excel.svg，我们将其用记事本打开，当然如果你可以用任何一种文本编辑器来打开，这里推荐使用 Visual Studio Code 作为数据分析师的文本编辑器。然后将内容复制进入PowerBI，如下：

我们用输入数据的方式将 Excel SVG文件的文本都放入，然后我们新建一个度量值：

SVG Excel = “data:image/svg+xml;utf8,” & SELECTEDVALUE( Excel[Data] )

可以看出我们使用 “data:image/svg+xml;utf8,” 与Excel的SVG文本进行了拼接，这是用PowerBI显示SVG的关键所在，然后设置该度量值的数据分类为图像URL，并用表格显示，如下：

将鼠标移动到该度量值上，可以看到背后就是一串文本定义。这就像在 PowerBI 官网显示了Logo一样。

值得重复强调的是，在 PowerBI 显示SVG的关键在于：

• 用 “data:image/svg+xml;utf8,” 与SVG拼接
• 设置数据分类为图像URL

这就是所有的秘密。

如何从web下载 SVG 图片并显示在PowerBI中

在搞清楚了PowerBI显示SVG的原理后，从web下载 SVG 图片并显示在PowerBI中其实并不难，步骤如下：

• 在任何网站找到感兴趣的图标，用浏览器的检查页面元素功能查看

• 下载这个SVG图片
• 用文本编辑器打开这个SVG图片
• 转上述的步骤即可

如何将任意图片（png，jpg等）转为 SVG 并在PowerBI中显示

这里推荐一款软件，叫做：Inkscape，如下：

该软件免费开源且终极强大又支持中文，属于我们期待的完美软件品类，如下：

你可以将不同文件转为 SVG，也可以制作 SVG 文件。例如，我们将 Excel120 的logo文件是 png 格式导入并转为 SVG。利用完全一样的套路就可以显示 SVG 效果：

如何自己制作 SVG 并在PowerBI中显示

在知道了Inkscape以后，制作 SVG 也是很简单的事情，它和 PS 等图形图像处理软件是类似的，但制作专业的 SVG 还是需要一定的学习的，感兴趣的伙伴可以自己去研究了，对于我这种不适合美工的人就拖出来两个星星吧：

当然可以利用同样的套路保存并复制其中的文本到PowerBI中显示，如下：

如何通过 PowerBI 度量值动态计算 SVG 数据实现动态显示（Sparkline）

在具备了以上基础之后，我们就可以进一步来玩高阶的玩法了，既然SVG只是文本，那其实我们可以通过程序自己来构建，我们查阅一些SVG的手册，不难发现：

定义一个圆：

效果是：

定义一条折线：

效果是：

打开脑洞的时间到了，我们发现了一些规律：

• 定义SVG的简单图形只需要很少的文本
• 定义的圆或者折线有些固定的关键参数，如：cx,cy定义了圆心，r定义了半径；points的序列定义了点

那么对于制作动态的 SVG 就可以理解为：

• 在PowerBI中使用 “data:image/svg+xml;utf8,” 与SVG数据拼接的套路
• 设置数据分类为图像URL
• SVG数据可以由实际数据动态计算得到

Sparkline 度量值

下面给出 Sparkline 度量值：

简单解释一下上述度量值的关键技巧：

• 意图按日期显示一条示意性的折线
• 归一化处理：将日期处理为x坐标从1到100
• 归一化处理：将度量值处理为y坐标从1到100
• 用绝对值转换为相对值实现上述归一化处理
• 按 SVG 显示折线点集的规律合并坐标点
• 注意：在SVG中，y是距离屏幕顶的距离，所以用100-y做处理
• 构建SVG数据

效果如下：

左边是矩阵中使用 Sparkine 度量值的效果，旁边是对应使用三个折线图的效果，说明 Sparkline 可以大致显示数据变化的趋势，将它放在矩阵中确实不失为一种非常酷的技巧。

总结

通过本文我们彻底理解了在PowerBI中使用SVG的所有技巧和技术细节，这为我们构建更动态更丰富的可视化效果提供了新的思路。

怎么样，是不是很有趣，快到自己的工作中实践起来吧。