彩票走势图

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

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

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

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

.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 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);

	} 

	.qv-object-qlik-multi-kpi { 

visibility: hidden;

	} 

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

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

即日起至1月31日均可参与，扫描下面二维码参与报名。如果您对本活动存在疑惑，可以咨询了解更多信息。