大多數(shù)QlikView開(kāi)發(fā)人員都熟悉為圖表/對(duì)象添加水印。但是Qlik Sense中，這不是你可以用開(kāi)箱即用的選項(xiàng)來(lái)實(shí)現(xiàn)的。需要通過(guò)使用一些CSS，可以比較簡(jiǎn)單地實(shí)現(xiàn)這個(gè)功能。有幾種方法可以做到這一點(diǎn)，本篇文章將帶你了解這些方法。

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

你可以創(chuàng)建你自己的Qlik Sense主題，或者從Sense Theme下載一個(gè)，以方便使用。一個(gè)Qlik Sense主題由2個(gè)核心文件和一些可選的資產(chǎn)組成。

• 一個(gè)定義（QEXT）文件
• 一個(gè)主要的JSON文件
• 其他可選資產(chǎn)（圖片、層疊樣式表等）。

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

這種方法有一些缺點(diǎn)，例如，用戶可能不喜歡在每個(gè)圖表中看到相同的水印，而且這也不能用于 "Qlik Dashboard Bundle "中的容器擴(kuò)展。為了簡(jiǎn)化事情，你可以在每個(gè)工作表中添加一個(gè)水印，它橫跨屏幕對(duì)角線。下面是一個(gè)如何做到這一點(diǎn)的示例代碼：

.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 "的一個(gè)擴(kuò)展，它是安裝時(shí)附帶的一部分（如果你選擇安裝額外的擴(kuò)展包。如果你的組織還沒(méi)有安裝這些，我會(huì)強(qiáng)烈建議你安裝）。) 這個(gè)圖表允許你添加自定義CSS。我們可以使用此擴(kuò)展來(lái)添加水印到工作表或每個(gè)使用此擴(kuò)展的圖表中。你可以簡(jiǎn)單地復(fù)制和粘貼上面的例子，這樣就可以了。記住，這個(gè)圖表的范圍只限于在這個(gè)圖表所屬的工作表中，水印不會(huì)在其他工作表中顯示，使用這種方法。在現(xiàn)有的應(yīng)用程序中，這是一個(gè)很好的在PoC或UAT表上顯示信息的方法。用戶將有更好的體驗(yàn)，因?yàn)樗麄儗⒛軌蛞谎劭闯鲞@是一個(gè)測(cè)試/開(kāi)發(fā)版本的表。

說(shuō)到自定義CSS，我們可以做的還有很多。這個(gè)例子只是展示了我們可以實(shí)現(xiàn)這一目標(biāo)的眾多方法之一。如果你注意到了，我們添加的水印是畫(huà)在對(duì)象/圖表的頂部，這意味著，有時(shí)我們不能點(diǎn)擊水印文本下的對(duì)象。你可以嘗試在CSS中針對(duì) "qv-object-content "類(lèi)，使用::before來(lái)繪制水印，這樣就可以把水印放在圖表的后面。下面是一個(gè)代碼的例子

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

	} 

確保你調(diào)整對(duì)象的大小只是為了一個(gè)單一的網(wǎng)格。這將仍然允許你在編輯模式下點(diǎn)擊KPI圖表，但只會(huì)向用戶顯示一個(gè)空白的網(wǎng)格，而自定義CSS仍然應(yīng)用到工作表上。

以上就是在Qlik Sense 中添加水印的所有方法了，當(dāng)然，如果您有其他的想法，也可以在評(píng)論留言，大家一起討論！

即日起至1月31日均可參與，掃描下面二維碼參與報(bào)名。如果您對(duì)本活動(dòng)存在疑惑，可以咨詢了解更多信息。