您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

Power BI Desktop中建立自己的SVG图标集

2019/10/18 19:56:50发布121次查看
我们在做数据可视化的时候,经常会用到图标,svg可缩放矢量图标是最佳选择,网络中有很多资源,今天我们介绍建立一个svg图标集,查找和引用这个图标集中的图标。
svg小知识:svg是标签语言,开始与结束要用标签包裹起来,我们引用现成的图标,所以我们不用系统的学习svg的语法,只需要了解最基本的设置就可以了:
我们只需要三个参数:
width:图标的宽度,数值是绝对大小,可以相对大小用vhheight:图标的高度,数值是绝对大小,可以相对大小用vhfill:图标的填充颜色,可以用英文名称,可以是颜色编码#fd625e
做了上述修改:这个图标就会是一个80*80的红色的图标。
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形式单个引用,也可以用在条件格式中引用这两个图标:
有了这个图标集,你就可以有丰富的图标可用,可以自定义大小、颜色,做出更出色的可视化作品。

该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product