百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

Power BI Desktop中SVG图标集的引用实践

liuian 2025-03-14 18:45 21 浏览

我们在做数据可视化的时候，经常会用到图标，SVG可缩放矢量图标是最佳选择，网络中有很多资源，今天我们介绍建立一个SVG图标集，查找和引用这个图标集中的图标。

SVG小知识：

svg是标签语言，开始与结束要用标签包裹起来，我们引用现成的图标，所以我们不用系统的学习svg的语法，只需要了解最基本的设置就可以了：

我们只需要三个参数：

  • width:图标的宽度，数值是绝对大小，可以相对大小用vh
  • height:图标的高度，数值是绝对大小，可以相对大小用vh
  • fill:图标的填充颜色，可以用英文名称，可以是颜色编码#FD625E

做了上述修改：这个图标就会是一个８０＊８０的红色的图标。

SVG资源

SVG资源网络上可以找到很多，推荐这个网站的223个应该够用了，这个网站是MIT license可以放心使用。

下载图标并解压出svg目录：

到这里我们就把准备工作做好了。

导入SVG图标

用Power Query从文件夹导入SVG图标：

解码二进制：

把二进制解码成Base64：

DAX中的准备工作：

把上面的图标集加载到Power BI 中，这个时候还不能直接引用SVG图标，因为我们还需要做一个编码声明，才能视图中显示出图标。

UTF8编码："data:image/svg+xml;utf8,"

另外我们要改变图标的大小与颜色，这两个工作可以在Power Query中做，也可以在DAX中做，都可以，就是简单的文本替换与拼接：

DAX中更接近我们excel中SUBSTITUTE：

red = SUBSTITUTE(svg[svg],"width=""8"" height=""8""","width=""80"" height=""80"" fill=""#FD625E""")

这是大小与颜色的改变。

同样可以做绿色、黄色的图标列

我们做一列可以直接显示的utf8的图标列：

这样也看不全啊，是能显示出图标，不完整或者太小不清晰，我们要做一个可视化查询：

Power BI可视化查询SVG图标

我们用三个视觉对象来查询SVG图标

Chiclet Slicer可以做一个SVG图标的矩阵列表：

Image Grid制作一个图标云：

Html Viewer制作单个图标视图：

这三个视觉对象都很简单，设置也很容易：

稍有不同的是：

  • Html Viewer：引用的列是不用声明utf8编码的列
  • 其他两个视觉对象：引用redutf8列，是utf8编码的列

就是说，我们要在Power BI 中引用图标，大部分时候是要utf8编码的。

单个SVG图标引用

通过编写度量值，指向单个图标：

我们先找一个要引用的图标名称：circle-check.svg

我们要用绿色的图标：

ShowGreen = "data:image/svg+xml;utf8,"&

CALCULATE(SELECTEDVALUE(svg[green]),'svg'[Name]="circle-check.svg")

我们引用红色的图标：

ShowRed = CALCULATE(SELECTEDVALUE(svg[redutf8]),'svg'[Name]="circle-check.svg")

应为我们有现成的utf8红色图标所以度量值前面就少了"data:image/svg+xml;utf8,"&

其实这个两个度量值就代表了这两个图标：

我们可以用image形式单个引用，也可以用在条件格式中引用这两个图标：

有了这个图标集，你就可以有丰富的图标可用，可以自定义大小、颜色，做出更出色的可视化作品。

相关推荐

python入门到脱坑函数—定义函数_如何定义函数python

Python函数定义：从入门到精通一、函数的基本概念函数是组织好的、可重复使用的代码块，用于执行特定任务。在Python中，函数可以提高代码的模块性和重复利用率。二、定义函数的基本语法def函数名(...

javascript函数的call、apply和bind的原理及作用详解

javascript函数的call、apply和bind本质是用来实现继承的，专业点说法就是改变函数体内部this的指向，当一个对象没有某个功能时，就可以用这3个来从有相关功能的对象里借用过来...

JS中 call()、apply()、bind() 的用法

其实是一个很简单的东西，认真看十分钟就从一脸懵B到完全理解！先看明白下面：例1obj.objAge;//17obj.myFun()//小张年龄undefined例2shows(...

Pandas每日函数学习之apply函数_apply函数python

apply函数是Pandas中的一个非常强大的工具，它允许你对DataFrame或Series中的数据应用一个函数，可以是自定义的函数，也可以是内置的函数。apply可以作用于DataF...

Win10搜索不习惯 换个设定就好了_window10搜索用不了怎么办

Windows10的搜索功能是真的方便，这点用惯了Windows10的小伙伴应该都知道，不过它有个小问题，就是Windows10虽然会自动联网搜索，但默认使用微软自家的Bing搜索引擎和Edge...

面试秘籍:call、bind、apply的区别,面试官为什么总爱问这三位?

引言你有没有发现，每次JavaScript面试，面试官总爱问你call、bind和apply的区别？好像这三个方法成了通关密码，掌握了它们，就能顺利过关。其实不难理解，面试官问这些问题，不...

记住这8招，帮你掌握“追拍“摄影技法—摄影早自习第422日

杨海英同学提问：请问叶梓老师，我练习追拍时，总也不能把运动的人物拍清晰，速度一般掌握在1/40-1/60，请问您如何把追拍拍的清晰？这跟不同的运动形式有关系吗？请您给讲讲要点，谢谢您！摄影：Damia...

[Sony] 有点残酷的测试A7RII PK FS7

都是好机！手中利器！主要是最近天天研究fs5，想知道fs5与a7rii后期匹配问题，苦等朋友的fs5月底到货，于是先拿手里现有的fs7小测一下，十九八九也能看到fs5的影子，另外也了解一下fs5k标配...

AndroidStudio_Android使用OkHttp发起Http请求

这个okHttp的使用,其实网络上有很多的案例的,但是,如果以前没用过,copy别人的直接用的话,可以发现要么导包导不进来,要么,人家给的代码也不完整,这里自己整理一下.1.引入OkHttp的jar...

ESL-通过事件控制FreeSWITCH_es事务控制

通过事件提供的最底层控制机制，允许我们有效地利用工具箱，适时选择使用其中的单个工具。FreeSWITCH是一个核心交换与混合矩阵，它周围有几十个模块提供各种功能特性。我们完全控制了所有的即时信息，这些...

【调试】perf和火焰图_perf生成火焰图

简介perf是linux上的性能分析工具，perf可以对event进行统计得到event的发生次数，或者对event进行采样，得到每次event发生时的相关数据(cpu、进程id、运行栈等)，利用这些...

文本检索控件也玩安卓?dtSearch Engine发布Android测试版

dtSearchEngineforLinux（原生64-bit/32-bitC++和JavaAPIs）和dtSearchEngineforWin&.NET（原生64-bi...

网站后台莫名增加N个管理员，记一次SQL注入攻击

网站没流量，但却经常被SQL注入光顾。最近，网站真的很奇怪，网站后台不光莫名多了很多“管理员”，所有的Wordpres插件还会被自动暂停，导致一些插件支持的页面，如WooCommerce无法正常访问、...

多元回归树分析Multivariate Regression Trees，MRT

多元回归树（MultivariateRegressionTrees，MRT）是单元回归树的拓展，是一种对一系列连续型变量递归划分成多个类群的聚类方法，是在决策树(decision-trees)基础...

JMETER性能测试_JMETER性能测试指标

jmeter为性能测试提供了一下特色：jmeter可以对测试静态资源（例如js、html等）以及动态资源（例如php、jsp、ajax等等）进行性能测试jmeter可以挖掘出系统最大能处...

一周热门
最近发表
标签列表