Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Power BI添加动态水印

Power BI添加动态水印

作者头像
wujunmin
发布于 2022-07-13 07:55:02
发布于 2022-07-13 07:55:02
2.4K00
代码可运行
举报
文章被收录于专栏:wujunminwujunmin
运行总次数:0
代码可运行

基于权限控制需求可能想在Power BI页面添加水印。静态水印使用度量值生成一个卡片图即可,本文讲解动态水印的制作及使用。

  1. 动态水印演示

顶部水平水印如下图所示,淡灰色的wujunmin在向右移动:

倾斜重复水印如下图所示:

原地转圈水印,如下图左上角:

转大圈水印,圆圈其实不需要,只是为了辅助让大家看到行动轨迹:

神出鬼没水印,看似随机的在移动:

2. 制作水印


水印使用度量值生成,原理是SVG的动画标签,将水印的文字替换为自己需要的,可以重复使用。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
水印_顶部水平 = 
 "<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 1280 20'>
<text x='0' y='20' font-size='20' fill='Grey' fill-opacity='0.4' text-anchor='middle'>wujunmin
<animate attributeName='x' from='0' by='1280' begin='0s' dur='30s' repeatCount='indefinite' />
</text>
</svg> "

viewbox设置的屏幕显示宽度高度,可依据自己的画布尺寸灵活调整。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
水印_重复倾斜 = 
VAR label = "wujunmin" //水印内容
VAR Label_Count = 10 //水印行数
VAR t =
    GENERATESERIES ( 1, Label_Count )
VAR t_text =
    ADDCOLUMNS (
        t,
        "tspan",
            "<tspan x='0' y='" & [Value] * 5 & "'>" & label & "
<animate attributeName='x' from='"
                & IF ( MOD ( [Value], 2 ) = 0, 0, Label_Count * 5 ) & "' by='"
                & IF (
                    MOD ( [Value], 2 ) = 0,
                    SQRT ( 2 ) * Label_Count * 5,
                    -1 * SQRT ( 2 ) * Label_Count * 5
                ) & "' begin='"
                & RANDBETWEEN ( 0, 10 ) & "s' dur='10s' repeatCount='indefinite' />
</tspan>"
    )
VAR SVG =
    "<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 " & Label_Count * 5 & " " & Label_Count * 5 & "'>
<g transform='rotate(-45," & Label_Count * 5 & "," & Label_Count * 5 & ")'>
<text font-size='5' fill='Grey' fill-opacity='0.2' text-anchor='middle' dominant-baseline='middle'>"
        & CONCATENATEX ( t_text, [tspan] ) & "
</text>
</g>
</svg> "
RETURN
    SVG
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
水印_原地转圈 = 
"<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 100 100'>
<text x='50' y='50' font-size='20' fill='Grey' fill-opacity='0.4' text-anchor='middle'>wujunmin
<animatetransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' begin='0s' dur='30s' repeatCount='indefinite' />
</text>
</svg> "
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
水印_转大圈 = 
"<svg xmlns='http://www.w3.org/2000/svg' viewbox='0 0 100 100'>
<text x='0' y='0' font-size='5' fill='Grey' fill-opacity='0.4' text-anchor='middle'>
        wujunmin
<animatemotion path='M0 50a50 50 0 1 0 100 0a50 50 0 1 0 -100 0z' begin='0s' dur='20s' repeatCount='indefinite' />
    </text>
</svg> "

神出鬼没水印读者可以自定义移动路径,自定义的方式为:

搜索引擎搜索SVG在线编辑(功能都差不多),任意打开一个编辑器,如下操作:

记事本打开保存好的SVG文件,将里面的path内容复制到上方的水印-转大圈度量值,移动路径则重新规划成功。

3. 显示水印


显示上方度量值做好的水印有三种方式。第一种是使用HTML Content视觉对象,将以上度量值放入该视觉对象即可正常显示。

注意为避免对图表造成遮挡,需要将加载水印的HTML Content置于底层:

使用HTML Content的好处是可以和Power BI模型中的用户权限设置产生联动,且支持的动画形式相对较多。坏处是消耗一定的内存及硬盘。

第二种是将以上度量值的<SVG></SVG>部分保存成外部SVG文件,使用添加页面背景的方式导入Power BI:

这种SVG文件很小,只有几个KB,加载迅速,移动丝滑,但是支持的动画相对基础,也无法和模型产生联动。

第三种和第二种类似,针对单个图表添加水印,可以绘图区单独导入SVG文件:


本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-06-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 wujunmin 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
销售排行榜这么做:Power BI绝对值和占比组合图
偶然间在网上看到一个研发费用图表,同时显示了各大公司的研发花费以及研发费用占营收的比例。个人认为这个图表非常实用,可以广泛应用于零售业各环节。比如,店铺销售排行榜和对公司的整体业绩贡献,产品销售排行榜和毛利贡献……
wujunmin
2022/05/19
1.5K0
销售排行榜这么做:Power BI绝对值和占比组合图
Power BI自定义业绩达成华夫饼图
在Power BI中,使用度量值可以直接生成华夫饼图,并且数据标签带有条件格式。下图示例为矩阵样式,业绩达成大于30%显示绿色否则显示红色。
wujunmin
2021/12/27
9680
Power BI自定义业绩达成华夫饼图
Power BI同期对比这么看
同期对比常规状态下可以使用簇状条形图/柱形图,以下是Power BI内置图表的效果。
wujunmin
2022/05/19
1.6K0
Power BI同期对比这么看
Power BI 卡片图显示动态水印
之前介绍过如何在Power BI使用HTML Content视觉对象制作动态水印,现在使用内置的新卡片图也可以显示水印了(不了解新卡片图参考:Power BI可视化的巅峰之作:新卡片图)
wujunmin
2023/09/05
4610
Power BI 卡片图显示动态水印
Power BI 切屏效果原理
前期介绍了几个在Power BI实现滚屏效果的原理及案例,那么切屏如何实现?下图展示了使用原生表格进行指标切换的例子,两个指标可以自动无限循环动态切换。
wujunmin
2023/02/28
9390
Power BI 切屏效果原理
Power BI两两对比这样做
源自知识星球星友遇到的一个对比问题,本文使用一个度量值实现元素间两两对比,主要用来和优秀对标。示例是零售店铺之间的差异。
wujunmin
2022/07/13
1.3K0
Power BI两两对比这样做
Power BI 模拟Apple Watch 环形图
左侧的环形图使用Power BI内置图表即可实现。中部的三个环形嵌套前期在讲小米的图表时涉及过(Power BI模拟小米运动APP三环效果),这里不再重复。右侧的环形图值得拿出来单独说明下,下方是Power BI实现效果。
wujunmin
2022/12/13
6520
Power BI 模拟Apple Watch 环形图
Power BI 切片器悬停框选动画
wujunmin
2025/02/10
900
Power BI 切片器悬停框选动画
Power BI模拟麦肯锡客流转化漏斗图
McKinsey Insights APP 时常分享商业图表,以下是一个简约的气泡示例:
wujunmin
2022/12/13
6330
Power BI模拟麦肯锡客流转化漏斗图
Power BI 标签倾斜式卡片图
主流的卡片图标签横平竖直,视觉疲劳。借助SVG,我们可以使用DAX绘制图表,轻松实现倾斜样式的卡片图,下图的左侧和右侧对城市标签进行了倾斜:
wujunmin
2025/02/10
1170
Power BI 标签倾斜式卡片图
Power BI套娃式客户转化漏斗
对客户的漏斗分析能够反映每一阶段的客户转化情况。例如,对实体店铺,客户的转化可以分为三个阶段:多少人经过店铺门口,其中多少人进店,最后多少人购买。
wujunmin
2022/05/19
5360
Power BI套娃式客户转化漏斗
Power BI表格也可以-接着奏乐,接着舞!
标记为图像URL放入任何矩阵中即可。颜色随机变化,对圆的半径使用animate增加动画,半径的大小也随机分布。
wujunmin
2022/02/09
5100
Power BI表格也可以-接着奏乐,接着舞!
双指标比较的一种另类方式
这是一个星友的提问,如何制作不等宽图表?常用来两个指标对比,一个度量值使用SVG模式实现,以不等宽条形图为例:
wujunmin
2022/02/09
5650
双指标比较的一种另类方式
Power BI 模拟国务院客户端日历
wujunmin
2025/02/10
820
Power BI 模拟国务院客户端日历
Power BI模拟微信公众号日、周、月对比
首先是指标的计算,日、周、月可以使用DATEADD函数倒推,参考此文业绩相关指标的计算(完成率、同比、环比、累计业绩)
wujunmin
2022/07/13
7950
Power BI模拟微信公众号日、周、月对比
SVG互动排版 | 拍照展开长图
实现拍照效果的过程:默认显示的照片淡出——显示白色矩形区域——白色矩形区域淡出——显示拍照后的图片
HTML5学堂
2021/11/25
1.1K0
SVG互动排版 | 拍照展开长图
左右滚动公告代码和上下滚动公告代码
左右滚动 <section id="1_607" class="yead_editor" οnmοusedοwn="shifuMouseDown('1_607')" label="Copyright
小小鱼儿小小林
2020/06/23
5.3K0
Power BI 内置图表实现Apple Watch环形图效果
去年此时看到Apple Wacth宣传图的一个环形图效果(下图右下角),并在Power BI使用第三方视觉对象实现。今年Power BI对SVG的支持大幅度提升,内置表格和新卡片图(不了解新卡片图参考此文:Power BI可视化的巅峰之作:新卡片图)都可以加载该图表。
wujunmin
2023/09/05
3360
Power BI 内置图表实现Apple Watch环形图效果
Power BI 模拟麦肯锡糖葫芦
无论是条形图、折线图、卡片图还是饼图,只是表面样式不同,实际都是占据一块矩形画布空间,并且画布的长宽比不能太离谱。
wujunmin
2022/12/13
1.5K0
Power BI 模拟麦肯锡糖葫芦
SVG - 动画制作
SVG - 动画制作 HTML5学堂:SVG - 动画制作。上一篇文章讲解了SVG的基本属性,大家能够利用SVG的基本属性进行绘制图像,那么如何让绘制好的图像动起来呢?今天要给大家分享的是SVG的动画制作,具体我们来看看下面的内容吧。 接触过HTML5的人,都知道,Canvas实现一个动画,需要不断的清除画布再重新绘制,如果没有接触过Canvas也不要紧,SVG之后我们紧接着要为大家介绍的就是Canvas。SVG提供了比较方便的API接口,动画实现起来比较方便,具体看看下面的动画命令。 SVG 动画基本命
HTML5学堂
2018/03/12
3.4K0
SVG - 动画制作
相关推荐
销售排行榜这么做:Power BI绝对值和占比组合图
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验