如何在Qlik Sense中添加水印？

大多数QlikView开发人员都熟悉为图表/对象添加水印。但是Qlik Sense中，这不是你可以用开箱即用的选项来实现的。需要通过使用一些CSS，可以比较简单地实现这个功能。有几种方法可以做到这一点，本篇文章将带你了解这些方法。

• 在Qlik Sense Theme中使用CSS
• 在 "Qlik Visualisation Bundle "的多KPI图表中使用自定义CSS。

Qlik Sense主题中的CSS

你可以创建你自己的Qlik Sense主题，或者从Sense Theme下载一个，以方便使用。一个Qlik Sense主题由2个核心文件和一些可选的资产组成。

• 一个定义（QEXT）文件
• 一个主要的JSON文件
• 其他可选资产（图片、层叠样式表等）。

要添加水印到你的主题，你需要添加一个CSS文件的主题，或只是修改现有的一个（如果你的主题已经包括一个CSS）。在任何文本编辑器中打开CSS文件，并在底部添加以下代码：

.qv-object-content-container::after {
    content: "kabonline.net"; /* Whatever you want to show in the watermarks */
    position: absolute;
    bottom: 5px;
    right: 5px;
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    /* Legacy and some vendor prefixes that you probably don't need... */
    background-image: -webkit-linear-gradient(330deg, #eaee44, #33d0ff);
    background-image: -moz-linear-gradient(330deg, #eaee44, #33d0ff);
    background-image: -o-linear-gradient(330deg, #eaee44, #33d0ff);
    opacity: .7;
}

这将在Qlik Sense应用程序中的每个图表的右下角添加一个带有背景渐变的小水印。

这种方法有一些缺点，例如，用户可能不喜欢在每个图表中看到相同的水印，而且这也不能用于 "Qlik Dashboard Bundle "中的容器扩展。为了简化事情，你可以在每个工作表中添加一个水印，它横跨屏幕对角线。下面是一个如何做到这一点的示例代码：

.qvt-sheet-container::after {
    content: "kabonline.net"; /* Whatever you want to show in the watermarks */
    position: absolute;
    top: 45%;
    left: 45%;    
    opacity: .7;
    z-index: 999;
    font-size: 30px;
    font-weight: 900;
    transform: rotate(-40deg);
    background-image: linear-gradient(120deg, #eaee44, #33d0ff);
    /* Legacy and some vendor prefixes that you probably don't need... */
    /* Safari */
    -webkit-transform: rotate(-40deg);
    background-image: -webkit-linear-gradient(330deg, #eaee44, #33d0ff);
    /* Firefox */
    -moz-transform: rotate(-40deg);
    background-image: -moz-linear-gradient(330deg, #eaee44, #33d0ff);
    /* IE */
    -ms-transform: rotate(-40deg);
    /* Opera */
    -o-transform: rotate(-40deg);
    background-image: -o-linear-gradient(330deg, #eaee44, #33d0ff);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
}

 

多KPI图表中的CSS

 

Multi KPI图表是 "Qlik Visualisation Bundle "的一个扩展，它是安装时附带的一部分（如果你选择安装额外的扩展包。如果你的组织还没有安装这些，我会强烈建议你安装）。) 这个图表允许你添加自定义CSS。我们可以使用此扩展来添加水印到工作表或每个使用此扩展的图表中。你可以简单地复制和粘贴上面的例子，这样就可以了。记住，这个图表的范围只限于在这个图表所属的工作表中，水印不会在其他工作表中显示，使用这种方法。在现有的应用程序中，这是一个很好的在PoC或UAT表上显示信息的方法。用户将有更好的体验，因为他们将能够一眼看出这是一个测试/开发版本的表。

说到自定义CSS，我们可以做的还有很多。这个例子只是展示了我们可以实现这一目标的众多方法之一。如果你注意到了，我们添加的水印是画在对象/图表的顶部，这意味着，有时我们不能点击水印文本下的对象。你可以尝试在CSS中针对 "qv-object-content "类，使用::before来绘制水印，这样就可以把水印放在图表的后面。下面是一个代码的例子：

.qv-object-content::before {

content: "Data on the rocks";

position: absolute;

left: 10px;

bottom: 10px; opacity: .7;

background-image: linear-gradient(120deg, #eaee44, #33d0ff);

/* Legacy and some vendor prefixes that you probably don't need... */

background-image: -moz-linear-gradient(330deg, #eaee44, #33d0ff);

background-image: -webkit-linear-gradient(330deg, #eaee44, #33d0ff); background-image: -o-linear-gradient(330deg, #eaee44, #33d0ff);

}

你可以用CSS和我们看的第二种方法（多KPI图表）来做的另一个技巧。你最终可以使用扩展来只影响应用中的表，而不向用户显示KPI对象。你可以通过简单地在你的CSS中添加以下内容来实现这一点。

.qv-object-qlik-multi-kpi {

visibility: hidden;

}

 

确保你调整对象的大小只是为了一个单一的网格。这将仍然允许你在编辑模式下点击KPI图表，但只会向用户显示一个空白的网格，而自定义CSS仍然应用到工作表上。

以上就是在Qlik Sense 中添加水印的所有方法了，当然，如果您有其他的想法，也可以在评论留言，大家一起讨论！

如果您对以BI为中心构建的解决方案感兴趣，可以参加慧都“专家1对1，助力2021企业数字决策化转型”活动，和大数据专家一对一咨询。立即报名