過濾器配置應用說明 - DataV

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

背景資訊

原理介紹

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

使用情境

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

在銷售報告中，只顯示某個地區的業績資料。
在即時監控大屏中，篩選出異常值（比如超過閾值的溫度資料）。
結合下拉式功能表或滑塊，讓使用者自己選擇想查看的資料範圍。

準備工作

前提條件

已經建立可視化應用。

進入畫布編輯器

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

登入DataV控制台。
在我的可視化頁面，將滑鼠移至上方至目標應用上，單擊編輯進入畫布編輯器頁面。

建立過濾器

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

說明

建立的過濾器將顯示在資料過濾器列表中，支援應用內組件調用。調用後，系統會自動展示過濾器與組件間的依賴關係。

面板中建立過濾器
1. 在畫布編輯器頁面，單擊上方工具列處的資料過濾器表徵圖，進入資料過濾器面板中，單擊建立。
2. 在過濾器配置地區，輸入過濾器的名稱和自訂的過濾代碼，單擊儲存。
組件中建立過濾器。
1. 在畫布編輯器頁面，單擊上方工具列處的資產列表表徵圖。
2. 在資產列表中添加一個組件（樣本中使用柱狀圖），單擊右側配置面板中的資料表徵圖。
3. 在資料配置面板中，選中資料過濾器後，單擊添加過濾器。
4. 在設定資料來源頁面中，單擊過濾器右側的。
5. 在資料過濾器配置面板中，輸入過濾器名稱和自訂的過濾代碼，單擊儲存。

管理過濾器

過濾器面板

在可視化應用左側的資料過濾器面板中，您可以管理應用內所有組件的過濾器，並且查看過濾器和組件之間的依賴關係。面板中的過濾器都可以被可視化應用內任意組件添加使用。管理過濾器面板

重要

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

基礎操作

重新命名過濾器：滑鼠移至上方至目標過濾器上，單擊表徵圖，輸入過濾器名稱。
刪除過濾器：滑鼠移至上方至目標過濾器上，單擊表徵圖刪除過濾器。
重要
刪除過濾器操作可能會導致相關組件不可用，請確認後操作。
添加過濾器
1. 在組件的資料配置面板中，選中資料過濾器後，單擊添加過濾器。
2. 在設定資料來源頁面中，在添加過濾器列表中選擇一個已有的過濾器。

排序過濾器

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

重要

如果中間有過濾器傳回值為空白，那麼該過濾器會被忽略，但過濾不會終止，且系統會在多個過濾器配置頁面中進行提示。
如果某個過濾器執行報錯，那麼過濾會終止，並採用上一次執行正確的結果。

調試過濾器

說明

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

在設定資料來源頁面中，單擊資料過濾器下方的開啟過濾器調試。
編輯過濾代碼，完成後單擊測試。
測試通過後，會顯示資料過濾結果。如下圖所示，左側彈窗的上下兩部分，分別展示了資料經過過濾器之前和之後的返回結果。

使用過濾器

本樣本以B站網頁視頻資料為例，展示如何利用資料過濾器結合輪播列表柱狀圖組件實現資料篩選。

登入DataV控制台。
在我的可視化頁面，選擇您建立的可視化應用，單擊編輯,進入畫布編輯器。
在畫布編輯器頁面，單擊表徵圖開啟資產列表，在搜尋方塊中輸入輪播列表柱狀圖。
選中當前組件，單擊右側面板的資料表徵圖。
單擊配置資料來源，進入設定資料來源頁面，在資料來源類型列表中選擇API，並在資料來源編輯框內填寫本次來源資料的B站URL網址連結（https://api.bilibili.com/x/web-interface/ranking）。選中伺服器代理請求（本次資料請求是跨域模式）。
單擊預覽資料來源返回結果，查看來源資料的返回結果。
在預覽頁面，可以看到請求的返回結果是一個JSON對象。但是輪播列表需要顯示的是對象列表，每個對象內需要包含value和content兩個欄位，因此需要執行以下步驟配置資料過濾器，轉換資料結構。
單擊添加過濾器右側的表徵圖，添加一個過濾器。編輯過濾器內的代碼內容，完成後，單擊儲存查看資料過濾結果。
```
return data.data.list.map(item => {
  return {
    value: item.author,
    content: item.title
  };
});
```
過濾器內的代碼編輯完成後，可以看到經過轉換得到的組件所需要的資料列表，內容顯示樣式為value和content兩個欄位。
說明
您也可以單擊資料響應結果內的表徵圖，複製到本地查看。

建立並匯入程式碼片段

您可以通過建立/匯入程式碼片段功能，在多個可視化應用之間複用過濾器，具體建立操作方法如下。

滑鼠移動到過濾器列表中的某個過濾器上，單擊建立程式碼片段表徵圖。
在彈出的對話方塊中，查看並修改名稱和Code，單擊確定。
程式碼片段儲存成功後，在我的資料頁面，單擊程式碼片段管理，查看並管理程式碼片段。
說明
您也可以在程式碼片段管理頁面，單擊列表上方的建立，建立一個全新的程式碼片段並儲存到下方列表中提供給組件使用。
程式碼片段建立成功後，可繼續執行以下步驟，將程式碼片段匯入到組件中，進行應用。
在過濾器代碼編輯框內單擊滑鼠右鍵，選擇匯入彈框內已有的某個程式碼片段，完成程式碼片段的匯入。
說明
匯入程式碼片段功能可以實現多個可視化應用之間過濾器代碼的共用與複用。

常見報錯

資料來源報錯：在組件資料面板添加完資料過濾器後，如果將當前資料來源切換成其他類型的資料來源，會在資料面板展示下面兩個錯誤，提示使用者資料來源配置有問題。
重要
當資料來源異常時，即使介面返回了資料內容，資料面板中的過濾器仍會保持禁用狀態（置灰顯示）。由於資料流在源頭已存在異常，後續的過濾處理將不再具有實際意義。
過濾器報錯：在過濾器對資料執行過濾過程中，如果代碼執行出錯會在介面兩個地方有報錯提示。
圖 1. 報錯一
圖 2. 報錯二

DataV：過濾器配置與應用