全部產品
Search
文件中心

DataV:過濾器配置與應用

更新時間:Apr 15, 2025

過濾器是用於動態篩選和控制可視化資料的核心組件,本文將系統介紹其配置、管理及多情境應用的操作方法。

背景資訊

原理介紹

過濾器是資料視覺效果中實現動態資料互動的重要功能,它通過使用者定義的條件規則(如數值區間、文本匹配、邏輯組合等)對未經處理資料進行即時篩選,並將結果更新至所有關聯的可視化組件。

使用情境

過濾器在資料視覺效果中應用廣泛,主要用於動態控制資料的顯示內容,典型情境包括:

  • 在銷售報告中,只顯示某個地區的業績資料。

  • 在即時監控大屏中,篩選出異常值(比如超過閾值的溫度資料)。

  • 結合下拉式功能表或滑塊,讓使用者自己選擇想查看的資料範圍。

準備工作

前提條件

已經建立資料看板專案

進入畫布編輯器

進行過濾器配置等相關操作前,請先依照以下步驟進入畫布編輯器

  1. 登入DataV控制台

  2. 工作台頁面,將滑鼠移至上方至目標專案上,單擊編輯進入畫布編輯器頁面。

建立過濾器

您可以通過以下兩種方法建立過濾器。

  • 面板中建立過濾器

    1. 在畫布編輯器頁面的左側導覽列中,單擊過濾器,進入過濾器頁面。

    2. 在過濾器面板中,單擊建立過濾器

    3. 在過濾器配置地區,輸入過濾器的名稱和自訂的過濾代碼,單擊儲存

    4. (可選)編輯過濾器時,可以單擊關聯全域變數,將已建立的全域變數關聯到當前過濾器中,關聯後可以直接在代碼中使用該變數。image

      建立成功的過濾器會排列顯示在過濾器列表中。

      說明

      建立的過濾器可被當前資料看板內的所有組件調用,被調用後,會顯示組件和過濾器的關聯關係。

  • 組件中建立過濾器

    組件支援兩種過濾器建立方式:手動設定和智能產生

    1. 在當前資料看板中添加一個組件(樣本中使用柱狀圖),單擊右側配置面板中的資料來源

    2. 資料來源配置面板中,開啟過濾器,單擊建立image

    3. 在過濾器配置地區,輸入過濾器的名稱和自訂的過濾代碼,單擊儲存

    4. 建立成功的過濾器會排列顯示在過濾器列表中,並顯示過濾器和組件之間的依賴關係。

管理過濾器

過濾器面板

過濾器面板中,您可以統一管理看板內所有過濾器。這些過濾器支援被任意組件添加使用,每個過濾器右側會顯示其被調用的數量。

image

重要

在過濾器面板中修改某個過濾器的配置時,會使所有依賴這個過濾器的組件不可用,請確認影響範圍後再儲存變更。

基礎操作

  • 重新命名過濾器:滑鼠移至上方至目標過濾器上,單擊{36390127-9760-4AF2-80B1-74722D42DAE2}表徵圖,輸入過濾器名稱。

  • 刪除過濾器:滑鼠移至上方至目標過濾器上,單擊{6326EB79-7C4F-4D4E-B88A-C15A44238390}表徵圖刪除過濾器。

    重要

    刪除過濾器操作可能會導致相關組件不可用,請確認後操作。

  • 添加過濾器:在組件的資料來源配置面板中,開啟過濾器開關,從下拉式功能表中選擇目標過濾器。

    image

  • 清空未使用過濾器:在組件中添加多個過濾器後,您可以在過濾器面板中單擊清空未使用過濾器一鍵清除所有未使用的過濾器。

    重要

    過濾器被清除後無法恢複,請謹慎操作。

排序過濾器

在組件中添加了多個過濾器後,可以通過上下拖動過濾器進行排序。2025-04-07_15-10-20

過濾順序:在組件資料來源中添加多個過濾器後,資料將按照從上到下的順序依次經過各個過濾器進行處理:第一個過濾器的輸入是資料來源直接返回的原始結果,第二個過濾器的輸入是第一個過濾器處理後的輸出資料,後續過濾器以此類推,每個過濾器都基於前一個過濾器的輸出結果進行進一步處理,最終輸出經過所有過濾器級聯處理後的資料結果。

重要
  • 如果中間有過濾器傳回值為空白,那麼該過濾器會被忽略,但過濾不會終止,且系統會在多個過濾器配置頁面中進行提示。

  • 如果某個過濾器執行報錯,那麼過濾會終止,並採用上一次執行正確的結果。

調試過濾器

資料來源頁面中,可以編輯過濾代碼進行調試,左側彈窗即時展示返回結果。

說明

過濾器調試功能可確保過濾代碼的正確性,但不適用於資料量過大的情況。

image.png

使用過濾器

以下樣本以柱狀圖組件為例,分別示範了過濾器在畫布編輯器和藍圖編輯器中的具體應用方法。

畫布中使用

  1. 在畫布編輯器中添加一個柱狀圖組件。

  2. 選中當前組件,在右側配置面板中單擊資料來源頁簽。

  3. 勾選過濾器複選框,單擊建立,建立過濾器。image

  4. 修改過濾器名稱為柱狀圖過濾器,並使用以下代碼替換初始過濾代碼。

    return data.splice(0,3)//過濾出前三項資料
  5. 單擊過濾器下方的測試,查看輸出結果。如下圖所示,為過濾器過濾後的效果。image

  6. 測試成功後,單擊儲存完成過濾器代碼編輯,即可在畫布中查看過濾後的可視化圖表。

    image

藍圖中使用

  1. 在畫布編輯器中添加兩個柱狀圖組件。

  2. 單擊頁面左上方的image表徵圖,切換到藍圖頁面。

  3. 在左側圖層節點頁簽中,將兩個柱狀圖節點拖拽添加到藍圖主畫布中。

  4. 單擊左側邏輯節點頁簽,添加一個串列資料處理節點。

  5. 依次將柱狀圖和串列資料處理節點連線,如圖所示。image

  6. 選中串列資料處理節點,在右側節點配面板中的處理方法模組單擊建立,新增一個過濾器。

  7. 修改過濾器名稱為柱狀圖串列處理,並使用以下代碼替換初始過濾代碼。image

    return data.splice(0,3)//過濾出前三項資料
  8. 單擊過濾器下方的儲存完成編輯,然後單擊藍圖頁面右上方的預覽進入預覽頁面。組件載入完成後即可查看篩選後的圖表結果。

    image

代碼智能推薦

過濾器的智能代碼推薦功能採用AI輔助技術,使用者通過自然語言描述資料處理需求,系統即可自動產生相應的資料過濾代碼,並支援線上編輯與調優。

操作樣本

  1. 在當前資料看板中添加一個組件(例如:柱狀圖)。

  2. 選中已添加的組件,單擊右側配置面板中的資料來源

  3. 資料來源配置面板中,開啟過濾器,單擊智能推薦

  4. 在輸入框中輸入資料處理條件(樣本:當y大於10時設定為10,為x添加'類型:'首碼。),按Enter鍵確認。{4656FC40-D626-4BA6-B9C6-F3A51AA5DC62}

  5. 產生的資料處理指令碼支援二次編輯,並支援在資料響應結果地區即時查看處理後的資料詳情。確認無誤後單擊應用,畫布編輯器中將展示過濾器篩選後的圖表結果。image

  6. 可選,若不需要使用當前處理方法,單擊撤銷應用即可。

常見問題

  • 資料來源報錯:在組件資料面板添加過濾器後,若切換至其他類型的資料來源,系統將在錯誤資訊地區顯示以下兩條介面異常提示。image

    重要

    當資料來源異常時,即使介面返回了資料內容,資料面板中的過濾器仍會保持禁用狀態(置灰顯示)。由於資料流在源頭已存在異常,後續的過濾處理將不再具有實際意義。

  • 過濾器報錯:當過濾器執行資料過濾時,若代碼運行出錯(如"待返回欄位未定義"等異常),系統將在介面顯示錯誤提示。image

相關操作

過濾器中引用全域變數的方法getLocalValuegetCallbackValue請參見過濾器引用