PowerBI中使用SVG图标简单介绍

已于 2022-07-13 22:14:32 修改
阅读量5k 收藏 21
点赞数 8
分类专栏： Power BI 文章标签： 学习
于 2022-07-13 21:51:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengxuan001/article/details/125762099
版权

PowerBI中使用SVG图标简单介绍

1. 什么是SVG？

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。
SVG 是使用 XML 来描述二维图形和绘图程序的语言。
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失。
SVG 是万维网联盟(W3C)的标准。

2. SVG的优势

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 图像可通过文本编辑器来创建和修改；
SVG 图像可被搜索、索引、脚本化或压缩；
SVG 是可伸缩的；
SVG图像可在任何的分辨率下被高质量地打印；
SVG 可在图像质量不下降的情况下被放大；
由于以上的特性，我们在Power BI中使用SVG图标就很有优势！

3. 什么时候使用？

正常情况下，我们在PBI中插入图片是采用 “直接插入图像” 的方式。
但是这种方式存在部分的局限性，即：当一些小的图标需要在表格中进行显示时，“直接插入图像” 的方式会显得很笨拙。
这时候，我们就可以考虑采用 “SVG图标” 的方式。

4. 一个简单的SVG示例

SVG 文件推荐使用 .svg（全部小写）作为此类文件的扩展名。
test.svg 文件:

<svg version="1.1"
  baseProfile="full"
  width="300" height="200"
  xmlns="http://www.w3.org/2000/svg">
  <rect width="100%" height="100%" stroke="red" 
  stroke-width="4" fill="yellow" />
  <circle cx="150" cy="100" r="80" fill="green" />
  <text x="150" y="115" font-size="16" 
  text-anchor="middle" fill="white">RUNOOB SVG TEST</text>
</svg>

得到以下的图形：

可以在 SVG运行测试 中进行验证。

SVG 代码解析：
SVG 代码和html代码类似，都是由标签组成的，标签可以嵌套。
SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> 。这是根元素。
width 和 height 属性可设置此 SVG 文档的宽度和高度；
version 属性可定义所使用的 SVG 版本；
xmlns 属性可定义 SVG 命名空间。
SVG 的 <rect> 用来创建一个矩形，通过 fill 把背景颜色设为黄色。
SVG 的 <circle> 用来创建一个圆。

cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)，r 属性定义圆的半径。 一个半径80px 的绿色圆圈 <circle> 绘制在红色矩形的正中央 （向右偏移 150px，向下偏移115px）。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 4px 宽，红色边框。
fill 属性设置形状内的颜色。我们把填充颜色设置为红色。
关闭标签 </svg> 的作用是关闭 SVG 元素和文档本身。
注释：所有的开启标签必须有关闭标签！

参考：菜鸟教程：SVG 实例

5. 在PBI中自定义SVG

在Power BI中使用SVG，都是用度量值来存放的。
自定义SVG：即没有现成的SVG图片，根据需要，自定义一些图表（可以简单地理解成“一笔一划”的画，过程较复杂，但功能更灵活）。
新建度量值，输入：

circle_icon = "data:image/svg+xml;utf8, 
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
<circle cx='30' cy='30' r='30' fill='green'/>  //画圆圈
</svg>"

字段说明：

  1. data:image/svg+xml;utf8
    含义：说明数据类型和编码格式(必须)。
  2. xmlns=‘http://www.w3.org/2000/svg’
    含义：xmlns用于说明这段代码所遵从的标准(必须)。
  3. viewBox=‘0 0 100 100’
    含义：说明可视窗口的大小(一般当成默认值即可，深究较复杂)。
    感兴趣的可以参考：svg中viewbox图解分析
  4. <circle cx=‘30’ cy=‘30’ r=‘30’ fill=‘green’/>
    含义：使用<circle…/> 标签可用来创建一个圆(根据需要，使用不同的标签)；cx、cy 属性定义圆心的x、y坐标；r 属性定义圆的半径；fill 属性设置形状的填充颜色。

然后将 [circle_icon] 度量值用表或矩阵来呈现，就可以得到以下的结果。
在这里插入图片描述

6. 在PBI中插入SVG图片

在一般的工作中，我们往往不是自己去设计SVG图片样式，而是直接插入别人设计好的SVG图片。所以，我们需要知道如何插入SVG图片到Power BI中。

1. 查看SVG图片的源代码

  1. 在浏览器中打开SVG图片；
  2. 鼠标右键单击 “查看源代码” ，就可以看到SVG图片的源代码。

2. PBI中插入SVG图片

  1. 复制源代码中<svg…>… </svg>标签中的所有内容；
  2. 将<svg…>… </svg> 标签内容中所有的双引号替换成单引号；
  3. 在PBI中新建度量值，粘贴上一步的<svg…>…</svg>标签内容，然后在前面加上 data:image/svg+xml;utf8 ，并用双引号引起来。(参照自定义SVG中的格式)
  4. 将度量值的数据类型改成“图像 URL”(很重要，否则无法显示)；
  5. 用表或矩阵来呈现度量值中存放的SVG图片。

7. 简单案例

sales表记录了不同日期和城市的销售数据。
数据的基本格式如下：

需求如下：
根据每个城市的销售总额，将排名前3的城市前面分别显示金、银、铜牌，排名后面的城市显示普通奖牌。

效果图如下：

具体步骤如下：

1.将金、银、铜牌和普通奖牌图标的SVG代码粘贴到到度量值中保存。
分别为：[icon_gold_medal]、[icon_silver_gold]、[icon_bronze_medal]和[icon_general_medal]；
这里只列出 [icon_gold_medal] 的具体写法：

icon_gold_medal = "data:image/svg+xml;utf8,
<svg t='1657694803903' class='icon' viewBox='0 0 1024 1024' 
version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='8707' 
xmlns:xlink='http://www.w3.org/1999/xlink' 
width='200' height='200'><defs>
<style type='text/css'>@font-face 
{ font-family: feedback-iconfont;}
</style></defs>
<path d='M337.175 0H162.375l249.8 449.6h174.8L337.175 0z' 
fill='#E64A19' p-id='8708'></path>
<path d='M686.875 0L437.075 449.6H611.875L861.675 0H686.875z' 
fill='#FF754C' p-id='8709'></path>
<path d='M586.975 449.6l-1.7-3.3-1.7 3.3h3.4zM482.775 260.7l-86 160.4 27.9 54.4 87-160.6-28.9-54.2z' 
fill='#C93D18' p-id='8710'></path>
<path d='M511.975 724.3m-299.7 0a299.7 299.7 0 1 0 599.4 0 299.7 299.7 0 1 0-599.4 0Z' 
fill='#FFBA57' p-id='8711'></path>
<path d='M511.975 974c-137.9 0-249.8-111.8-249.8-249.8s111.8-249.8 249.8-249.8 249.8 111.8 249.8 249.8c-0.2 138-111.9 249.7-249.8 249.8z m-74.9-174.8v50h149.9v-50h-50V649.4h50v-50H437.075v50h50v149.9h-50z' 
fill='#FFE082' p-id='8712'></path>
</svg>"

注：开头记得加：data:image/svg+xml;utf8
2.新建度量值sales_sum，计算总销量 (具备“行上下文”功能。如果直接在后面的度量值icon_presentation里面定义成变量，则不具备“行上下文”功能，rankx()函数无法实现排名)；

sales_sum = sumx('sales','sales'[sales])

3.新建逻辑控制度量值，根据不同排名，展示不同的图标；

icon_presentation = 
// 根据城市的销量进行排名
var sales_rank = rankx(all('sales'[city]),[sales_sum])  
return 
if(HASONEVALUE(sales[city]),  // 让总计处不显示图标
switch(sales_rank,
1,[icon_gold_medal],
2,[icon_silver_gold],
3,[icon_bronze_medal],
[icon_general_medal]))

3.将度量值icon_presentation的数据类型改成“图像 URL”；

4.在表格中分别放入度量值icon_presentation、city和sales，对sales进行降序排列，就可以得到上面的效果图。

158_模型_Power BI 使用 DAX + SVG 打通制作商业图表几乎所有可能
焦棚子的博客
06-25 696
DAX + SVG + HTML Content 视觉对象打通了制作平面的商业图表的几乎所有可能。
Power BI ----SVG（圆环图）
Itsme_MrJJ的博客
03-21 1113
Power BI 中SVG的应用
Power-BI-Icons:Microsoft Power BI中所有对象的图标
04-12
Power-BI-图标 Microsoft Power BI中所有对象的图标。 所有权和版权 我不将所有权归因于这些图标和图像中的任何一个。 没有侵犯版权的目的。 所有文件均来自公共互联网和各种Microsoft网站，并已从中进行抓取。 它们在合理使用的情况下收集在这里。 Microsoft允许在体系结构图，培训资料或文档中使用这些图标。 除非得到Microsoft的明确许可，否则您只能复制，分发和显示图标以用于允许的用途。 Microsoft保留所有其他权利。 不要裁剪，翻转或旋转图标。 请勿以任何方式扭曲或更改图标的形状。 不要使用Microsoft产品图标来代表您的产品或服务。
Vue项目中如何使用SVG图标？
最新发布
SDTechnology的博客
03-14 459
如果项目中有大量 SVG 图标，推荐使用 SVG Symbol Sprite 的方式，这样可以减少 HTTP 请求次数并优化性能。如果需要动态加载 SVG 图标，可以结合 Vue 的动态组件功能。Iconify 是一个支持多种图标的库，可以直接在项目中使用。可以借助一些成熟的第三方库来简化 SVG 图标的管理，例如。减少 HTTP 请求，性能优化明显，适合大量图标。将所有 SVG 图标合并到一个文件中，并使用。提供丰富的图标集合，无需手动管理图标文件。文件，配置对 SVG 文件的处理规则。
PowerBI实用技巧——案例十 (利用SVG图像可视化)
hfjwanzi的博客
02-03 5921
可能通过此链接进行简单入门学习
探索Power BI中的SVG魔力：视觉提升新纪元
Sharewinfo_BJ的博客
08-21 484
数据分析领跑者
Power BI之SVG自定义可视化
DAVIS的博客
01-08 821
原文发布时间: 2019-04-14 06:03:50 +0000。
Power BI笔记：给排名度量添加矢量图标效果
weixin_37537423的博客
09-30 653
Power BI笔记：给排名度量添加矢量图标效果
PBI中使用SVG自定义折线缩略图
lengxuan001的博客
07-14 1225
在学习别人做的报表的时候，我有看到如下图所示的效果。 我个人觉得这个趋势图比较有意思，于是就研究了一下是如何画出来的。 经研究发现，这个就是用SVG画出来的。 前面介绍SVG的时候提到过，SVG可以用来画一些自定义的图表。 这里我们主要就学习如何用SVG画折线图。 图中所示的折线图的含义是：每类电影票房趋势的变化(by year)。 即：X轴——year，Y轴——每年该类电影票房总值。由于是缩略图，我们肯定不能按照真实的year和票房来展现X、Y轴。 而需要对X、Y轴进行一些处理，让缩略图显示得更加美观。
工具介绍 | 带你了解 Power BI 中的工具提示
PowerPivotShop的博客
04-09 2628
工具提示，是Power BI中增加可视化对象可读性的一种常用工具。下面我将系统的为大家介绍工具提示的类别和适用方法，文末还有小彩蛋呦~ 默认的工具提示 每一个可视化对象都会有默认的工具提示。 在你鼠标悬停到任意数据条时，显示出来的标注性文本就是默认的工具提示页。 默认的工具提示是可以关掉的。在可视化对象的格式栏，关闭“工具提示”开关即可。 报表页工具提示 当我们想展示更多信息的时候，通过创建用...
数据可视化练习-用powerBI生成自动播放的动态排行榜
热门推荐
chongminglun的博客
11-08 2万+
数据可视化练习-用powerBI生成自动播放的动态排行榜前言1. 前期准备：账号注册及软件下载2、数据获取及预处理3、可视化效果搭建4、发布共享其他 前言 最近在B站很流行各种动态排行榜视频，动态排行榜制作源代码来自一位大神基于d3.js做的一个将历史数据排名转化为动态柱状图图表的数据可视化项目，但原项目中的图表在网页上是一次性运行，除非实时录屏，否则在其他电脑上需重做，无法直接分享，本人新入数据...
158_模型_Power BI 使用 DAX + SVG 打通制作商业图表几乎所有可能.doc
07-10
158_模型_Power BI 使用 DAX + SVG 打通制作商业图表几乎所有可能.doc
【PowerBI自定义视觉】：官方教程，个性化视觉对象创造
[【PowerBI自定义视觉】：官方教程，个性化视觉对象创造](https://www.crestdatasys.com/wp-content/uploads/2022/01/Custom-PowerBI-visual-development-1024x581.jpg) # 1. Power BI自定义视觉基础 Power BI...
Power BI新卡片不显示SVG的问题
y523648的博客
05-24 508
但是在新卡片里无法显示，查了很久，最后发现是因为新卡片对SVG的代码要求和表格不一样，data:image/svg+xml;utf8,这里不能换行。吐槽：这个问题隐藏的太深，如果不是无意中发现，估计要在这问题上卡一辈子。
SVG着色地图在power BI上的应用
N13260211757的博客
11-02 1039
将SVG文件导入power BI中进行可视化分析
PS基础之图框
大紫明宫空离境
12-17 576
图框工具快速布局图像大小。 在背景拉出一个图框，然后载入图片，调整大小，在外面点一下，完成操作。（可以发现，图像大小和图框一边对齐） 总结： 点击左侧图标，可以重新调整图框大小。 ...
PowerBI系列之SVG绘图专题
06-04
该专题主要分两大部分的内容，一是SVG的知识讲解，二是PowerBI中如何利用SVG来制作一些特殊的图像和可视化效果1.      SVG基础介绍2.      SVG矩形、圆形和椭圆3.      SVG线条和多边形4.      SVG文本和图片5.      SVG绘制路径6.      SVG其他知识7.      SVG动画基础8.      PowerBI动态控制图标大小和颜色9.      PowerBI表格中制作条形图10.   PowerBI制作报表水印11.   PowerBI图片滚屏效果12.   PowerBI中国和省份地图13.   PowerBI地图上标记图标14.   PowerBI制作三维地图
Power BI 可视化的图表
weixin_48622025的博客
08-10 3488
1. 柱状图 适用场景：适用于场合是二维数据集（每个数据点包括两个值X和Y），但只有一个维度需要比较，用于显示一段时间内的数据变化或显示各项之间的比较情况 优势：柱状图利用柱子的高度，反应数据的差异，肉眼对高度差异很敏感 劣势：柱状图的局限在于只适用中小规模的数据集 2. 堆积柱状图，百分比堆积柱状图 不仅可以直观的看出每个系列的值，还能够反映出系列的总和，尤其是当需要看某一单位的综合以及各系列值的比重时，最适合 3. 条形图 适用场景：显示各个项目之间的比较情况，可参考柱状图 优势：每个条都清晰表..
可视化大屏表格数据滚动的几种实现方案
懒羊羊我小弟的博客
02-28 3552
本文主要介绍可视化大屏中实现表格数据无缝滚动的几种方案，实现原理、实现方案、具体代码等。不同方案供大家参考，还有常用的第三方滚动插件推荐。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值