大多數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日均可參與，掃描下面二維碼參與報名。如果您對本活動存在疑惑，可以咨詢了解更多信息。