篩選窗格範例 | Qlik Cloud 說明
跳到主要內容 跳至補充內容

篩選窗格範例

本說明主題提供數個範例,說明如何在篩選窗格中自訂樣式及其他屬性,以達成多種功能目的。

範例 1 — 精簡設計

您可以新增許多清單方塊至篩選窗格,允許精簡跨許多不同維度的資料。

為了節省空間並優先處理工作表上的其他視覺化,您可以為篩選窗格提供精簡設計,其中內容可視需要展開和摺疊。

  1. 建立新的應用程式並將 範例載入指令碼 貼到 資料載入編輯器 中的新區段。然後,載入資料。

  2. 切換至工作表檢視。在工作表屬性中,將 格線間距 設定為 42。

  3. 篩選窗格拖曳至工作表。

  4. 按一下新增維度。選取 Country

  5. 在屬性面板中,按一下新增欄位。選取 Item Type

  6. 使用 新增欄位 按鈕,新增其他四個維度作為清單方塊:

    • Order Year
    • Order Priority

    • Region

    • Sales Channel

  7. 逐一展開您剛新增的每個清單方塊,並將 簡報 > 摺疊清單方塊 設定為 永遠

  8. 在屬性面板中,展開外觀 > 呈現

  9. 按一下調色盤 樣式

  10. 篩選窗格索引標籤中,設定下列屬性:

    • 標題的字型大小:18px

    • 標題的字型色彩:十六進位代碼 #ffffff

    • 背景顏色:十六進位碼 #87205d

    • 陰影:小,十六進位碼 #000000

  11. 清單方塊 索引標籤中,設定下列屬性:

    • 標題的字型大小:14px

  12. 將篩選窗格調整為工作表格線上的二乘十空間。

切換至分析模式。您可以視需要展開清單方塊以進行選取。

抽屜式篩選窗格處於摺疊狀態

篩選窗格處於分析模式,處於完全摺疊狀態

抽屜式篩選窗格,維度清單已展開

分析模式中的篩選窗格,維度清單已展開

範例 2 — 豐富的設計

雖然篩選窗格主要用於篩選資料,但它也可以用於視覺化資料。整合豐富的設計可讓分析人員在進行不同選取時獲得見解。

  1. 建立新的應用程式並將 範例載入指令碼 貼到 資料載入編輯器 中的新區段。然後,載入資料。

  2. 切換至工作表檢視,並將篩選窗格拖曳至工作表。

  3. 按一下新增維度。選取 Item Type

  4. 按一下Item Type清單方塊以展開其屬性。

  5. 展開呈現

  6. 開啟長條圖設定。

  7. 使用顯示頻率下拉式功能表以選取相對頻率 (%)

  8. 設定 摺疊清單方塊永不

  9. 展開 排序

  10. 排序 設定為 自訂

  11. 清除所有選項並開啟 依運算式排序

  12. 選取 遞減

  13. 運算式之下,輸入下列運算式:

    Count([Item Type])
  14. 在屬性面板中,展開外觀一般

  15. 關閉顯示標題

  16. 展開外觀呈現

  17. 點擊 調色盤樣式

  18. 清單方塊索引標籤中,設定下列屬性:

    • 標頭

      • 字型:Inter, sans-serif

      • 字體大小:18px

    • 內容

      • 字型:Inter, sans-serif

  19. 將篩選窗格調整為小型矩形,例如,三乘四個方塊。

篩選窗格具有豐富設計。篩選窗格中的項目會顯示數值分佈長條圖和相對百分比,並依出現次數從高到低降序排列。

分析模式中的篩選窗格,附長條圖。

範例 3 — 聚焦式設計

您設計篩選窗格的方式,取決於您希望使用者如何進行選取。例如,您可能希望限制使用者使用某些功能,以鼓勵他們與資料進行更精確、更聚焦的互動。

情境包括:

  • 當值一次選取一個,或選取多個值無法提供任何有意義的深入分析時,篩選特定維度會帶來最大的深入分析。若要以這種方式引導分析,您可以使用核取方塊模式關閉範圍選取。

  • 在欄位中搜尋值要嘛無法提供深入分析,要嘛不合適。

  • 您想要在篩選資料時將干擾降到最低,例如選取項目工具列。

  1. 建立新的應用程式並將 範例載入指令碼 貼到 資料載入編輯器 中的新區段。然後,載入資料。

  2. 切換至工作表檢視,並將篩選窗格拖曳至工作表。

  3. 按一下新增維度。選取 Item Type

  4. 按一下 Item Type 清單方塊以展開其屬性。

  5. 搜尋 設定為 隱藏

  6. 關閉 顯示選項工具列

  7. 展開呈現

  8. 開啟核取方塊模式

  9. 在屬性面板中,展開外觀一般

  10. 關閉顯示標題

  11. 將篩選窗格調整為小型矩形形狀,例如三乘四個方塊。

篩選窗格與聚焦設計

分析模式中的篩選窗格,使用核取方塊模式。

範例 4 — 格線設計

您可以使用格線模式,用於使用小型、已定義資料集的篩選窗格。一個很好的範例是在格線中組織以時間為基礎的維度。

  1. 建立新的應用程式並將 範例載入指令碼 貼到 資料載入編輯器 中的新區段。然後,載入資料。

  2. 切換至工作表檢視,並將篩選窗格拖曳至工作表。

  3. 按一下新增維度。選取 Order Year

  4. 按一下 Order Year 清單方塊以展開其屬性。

  5. 關閉顯示標題

  6. 展開 呈現

  7. 設定 摺疊清單方塊永不

  8. 針對 顯示資料於,選取 格線

  9. 最大可見欄 設定為 自訂

  10. 最大欄數 設定為 3。

  11. Order Quarter 新增為篩選窗格中的清單方塊。

  12. 按一下 Order Quarter 清單方塊以展開其屬性。

  13. 關閉 顯示標題

  14. 展開 呈現

  15. 設定 摺疊清單方塊永不

  16. 針對顯示資料於,選取格線

  17. 排序依據設定為

  18. 最大可見列數設定為自訂

  19. 最大列數設定為 1。

  20. Order Month 新增為篩選窗格中的清單方塊。

  21. 按一下 Order Month 清單方塊以展開其屬性。

  22. 關閉顯示標題

  23. 展開 呈現

  24. 設定 摺疊清單方塊永不

  25. 針對 顯示資料於,選取 格線

  26. 設定 最大可見欄自訂

  27. 設定 最大欄數 為 4。

  28. 在屬性面板中,展開外觀一般

  29. 關閉顯示標題

  30. 在屬性面板中,展開外觀呈現

  31. 按一下調色盤樣式

  32. 篩選窗格索引標籤中,設定下列屬性:

    • 背景顏色:#83af9b

  33. 清單方塊索引標籤中,設定下列屬性:

    • 內容

      • 字型:Fredoka One, fantasy

      • 文字大小:15px

      • 文字大小:粗體

      • 文字顏色:#000000

    • 選取狀態 > 可能: #000000

    • 背景顏色: #83af9b

  34. 將篩選窗格調整為適合顯示的大小,例如三乘三。

具有格線設計的篩選窗格

分析模式中的篩選窗格,使用格線模式。

進一步增強功能:包含版面配置容器的複合篩選窗格

為了進一步的回應能力和控制,您可以將上述篩選窗格建立為嵌入在版面配置容器中的三個篩選窗格系列。下圖顯示了這可能的外觀範例。

嵌入在版面配置容器中的格線樣式篩選窗格

包含多個格線樣式篩選窗格的版面配置容器。

範例 5 — 與組織的調色盤對齊

篩選窗格可以根據您組織的調色盤進行樣式設定。除了定義背景和文字顏色之外,您還可以為篩選窗格中的選取狀態設定配色方案。您可能希望選取項目以您公司主要品牌顏色顯示,而不是預設的綠色。

透過自訂佈景主題,您可以透過為所有視覺效果和選取工具列中的選取項目設定顏色,進一步應用您組織的配色方案。如需更多資訊,請參閱自訂佈景主題

在此範例中,我們建立一個篩選窗格,反映下列品牌色彩:

  • 主要色彩:十六進位碼 #3100ff

  • 次要色彩:十六進位碼 #9ba7ff

  1. 建立新的應用程式,並將範例資料貼上到 資料載入編輯器 中的新區段。然後,載入資料。

  2. 切換至工作表檢視,並將篩選窗格拖曳至工作表。

  3. 按一下新增維度。選取 Item Type

  4. 在屬性面板中,按一下新增欄位。選取 Order Year

  5. 使用新增欄位按鈕,新增其他三個維度作為清單方塊:

    • Order Priority

    • Region

    • Sales Channel

  6. 在屬性面板中,展開外觀一般

  7. 關閉顯示標題

  8. 展開外觀呈現

  9. 點擊 調色盤樣式

  10. 篩選窗格 索引標籤中,設定下列屬性:

    • 陰影:小型,十六進位代碼 #000000

  11. 清單方塊 索引標籤中,設定下列屬性:

    • 標題的字型大小:14px

    • 選取狀態:

      • 已選取: 十六進位代碼 #3100ff

      • 替代: 十六進位代碼 #9ba7ff

      • 已排除: #bebebe

      • 已選取且已排除: #7b7a78

      • 可能: #ffffff

  12. 調整篩選窗格大小,使其在工作表的一側呈長方形—例如,三乘十二個方格。

切換至分析模式。在篩選窗格中進行選取,以檢視色彩配置。

篩選窗格,具有反映品牌色彩的選取狀態

篩選窗格,其選取狀態反映品牌色彩

範例載入指令碼

此頁面是否對您有幫助?

若您發現此頁面或其內容有任何問題——錯字、遺漏步驟或技術錯誤——請告知我們!