专栏首页PowerBI战友联盟PowerBI 从矩阵Sparkline揭示SVG图形通用技巧

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的所有技巧和技术细节,这为我们构建更动态更丰富的可视化效果提供了新的思路。

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

本文分享自微信公众号 - PowerBI战友联盟(powerbichina),作者:BI佐罗

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PowerBI 地图 - 形状地图最佳实践

    在某些情况下,要注意台湾,香港,澳门和南海诸岛都应该包括到地图里。形状地图不需要加载一个复杂的在线地图,但目前在 PowerBI 的默认形状地图,不能放置文本,...

    BI佐罗
  • PowerBI 2018年12月更新 - 支持你成为神一样的存在

    有这样一种人,他们拎着键盘,然后就没有然后了,他们对着黑漆漆的屏幕,完全像写天书地一样写代码,创造了数字化的世界。在多年前有幸目睹一位神一样的开发者,中午还很屌...

    BI佐罗
  • 【PowerBI小技巧】导出矩阵数据并打通 Excel

    因此,从 PowerBI 中也就不存在导出矩阵了,因为我们可以在 Excel 中直接利用这些成果了,例如:

    BI佐罗
  • Android 优化——应用瘦身

    七适散人
  • 为什么要用SVG?- svg与iconfont、图片多维度对比

    腾讯ISUX
  • Using SVG

    SVG是一种向量图的图片格式,即可伸缩向量图(Scalable Vector Graphics),可以在Adobe Illustrator里面生成。在Web中使...

    icepy
  • 玩转SVG让设计更出彩

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? 使用SVG,提升视觉设计表现力,让设计更出彩。 ? 前言 SVG 概述 随着浏览器...

    腾讯ISUX
  • Android微信上的SVG

    资源矢量化 “清晰”和“体积”的矛盾与麻烦 面对android的各种dpi某事,想要所有设备上的图片都能有最清晰的效果,就意味着每种dpi模式都必须提供一份对应...

    微信终端开发团队
  • SVG - 创建SVG图片

    SVG - 创建SVG图片 HTML5学堂:之前在绘图中使用到了SVG以及Canvas,因此决定最近将绘图类的知识和大家分享一下。从研究角度来说,SVG比Can...

    HTML5学堂
  • 设计师使用SVG的必读文章

    导语-“本文适合设计师浅读,适合有追求的设计师和UI开发同学仔细研读“

    社会我田哥

扫码关注云+社区

领取腾讯云代金券