如何配置組件資料 - DataV

資料來源配置是建立組件和展示業務資料的關鍵步驟，具有資料接入、資料處理和資料即時更新的功能。本文介紹如何進行配置組件資料。

功能說明

DataV-Board 支援接入各種業務資料，包括待用資料、資料庫、應用網關等。通過資料來源配置，將業務資料接入並適配到組件，同時設定資料禁止載入態、受控模式、自動更新請求實現對資料的載入效能最佳化、組件間參數傳遞和即時資料更新。

操作流程

前提條件

登入DataV-Board 7.0控制台。
已準備並添加相關資料來源。
進入看板編輯頁，並建立組件。

配置資料

組件預設內建待用資料，下面以柱圖資料接入為例，示範如何通過待用資料、全域變數和資料來源進行組件資料來源配置。

待用資料適配組件

本樣本通過對待用資料調整，展示某學校各階段學生人數對比柱圖。

建立並選中柱狀圖組件，進入資料來源面板，單擊資料對應查看柱圖預設內建資料和適配結構。
觀察資料結構，柱圖接受x欄位作為X軸資料，y欄位作為Y軸資料，colorField欄位作為顏色堆疊分組。
在可視化編輯狀態，可直接調整待用資料。
點擊，切換至代碼編輯狀態。通過增加、刪除或修改JSON格式的程式碼完成資料來源的編輯。
當您調整成如下JSON資料後，柱圖將展示某學校各階段學生人數對比圖。
某學校各階段學生人數JSON資料
```
[
  {
    "colorField": 100,
    "x": "小學",
    "y": 145
  },
  {
    "x": "初中",
    "colorField": 100,
    "y": 200
  },
  {
    "x": "高中",
    "y": 290,
    "colorField": 100
  }
]
```
說明
完成資料配置後，可按需調整樣式。例如，上圖可隱藏圖例，顯示座標軸標題，讓圖表語義更明確。

全域變數適配組件

組件支援全域變數作為傳入資料，本樣本示範將柱圖資料通過schoolInfo的全域變數形式接入組件。

進入全域變數頁簽，建立變數並修改變數名稱為schoolInfo。

修改初始值內容如下。

某學校各階段學生人數JSON資料

[
  {
    "colorField": 100,
    "x": "小學",
    "y": 145
  },
  {
    "x": "初中",
    "colorField": 100,
    "y": 200
  },
  {
    "x": "高中",
    "y": 290,
    "colorField": 100
  }
]

建立選中柱狀圖組件，進入資料來源面板，單擊資料對應查看柱圖預設內建資料和適配結構。觀察資料結構，柱圖接受x欄位作為X軸資料，y欄位作為Y軸資料，colorField欄位作為顏色堆疊分組。
資料來源類型選擇全域變數，並選擇schoolInfo作為組件的業務資料。
組件資料和待用資料一致，無需適配，此柱圖展示某學校各階段學生人數對比。
說明
全域變數除傳遞靜態值外，還有其他使用情境。具體請參見使用全域變數。

資料來源適配組件

資料來源方式接入業務資料流程如下：先接入資料，再通過資料響應結果觀察業務資料和組件資料的結構差距，通過資料對應或過濾器進行資料的適配處理，最終得到適配資料。本樣本基於一份關鍵資料欄位為 category產品類別和quantity銷售量的零售店資料集，用柱狀圖展示不同產品類別的銷售情況。

建立選中柱狀圖組件，進入資料來源面板，單擊資料對應查看柱圖預設內建資料和適配結構。觀察資料結構，柱圖接受x欄位作為X軸資料，y欄位作為Y軸資料，colorField欄位作為顏色堆疊分組。
資料來源類型選擇RDS for MySQL，選擇已有資料來源，並用SQL取數擷取已準備好的業務資料。

點擊資料響應結果，查看返回資料結構。

[
  {   
    "id": 1,
    "category": "Electronics",
    "sales_amount": 15000,
  },
  {
  ...
  }
]

由於目前返回資料結構並不是柱圖需要的資料結構，需要進行資料適配。可通過資料對應或過濾器進行資料處理。
說明
可同時使用過濾器和資料對應處理業務資料，過濾器優先。
方式一：資料對應
1. 開啟資料對應，配置x欄位和y欄位如下圖。
2. 由於未配置colorField欄位，銷售柱圖如下：
方式二：過濾器
1. 可通過過濾器處理資料，代碼如下：
```
function filter(data){
  return data.map(item => {
    return {
      x: item.category,
      y: item.quantity,
      colorField: 1
    }
  });
}
```
2. 您將得到如下銷售柱圖：

配置項說明

資料項目配置	說明
資料來源	組件的資料來源中通過代碼編輯或可視化編輯展示了組件所包含的資料欄位。也可以修改資料類型，靈活配置組件資料。
資料對應	當您需要自訂圖表欄位配置時，可以在資料對應模組設定不同的欄位對應內容，將這些欄位對應到組件對應的欄位上。無需修改資料來源中的欄位，就可以實現資料的即時匹配。也可以單擊表徵圖對欄位分別樣式配置。
過濾器	開啟過濾器，選擇已建立的資料過濾器或建立資料過濾器，並配置資料過濾器指令碼，實現資料的篩選功能。詳情請參見管理資料過濾器。
資料響應結果	即時展示了組件所使用的資料。當組件資料來源發生變化時，資料響應結果會對應展示最新的資料。如果系統反應延遲，您可以單擊右側的表徵圖，查看資料響應結果，也可以單擊右側的表徵圖，擷取組件的最新資料。您也可以單擊查看樣本，查看當前組件的響應結果樣本。
禁止載入態	勾選複選框，在組件更新和預覽資料看板時，將看不到組件初始化時的載入內容，去勾選則相反。預設為去勾選狀態。
受控模式	勾選複選框，組件初始化狀態下不請求資料，僅通過全域變數或藍圖編輯器配置的方法發起請求資料；去勾選複選框，可以使用自動更新請求資料。預設為去勾選狀態。
自動更新請求	勾選複選框，可以手動輸入輪詢的時間頻次設定動態輪詢。清除後則不會自動更新，需要手動重新整理頁面，或通過藍圖編輯器和全域變數事件來觸發請求更新資料。

常見問題

若配置中遇到問題，請參見資料來源配置常見問題嘗試排查。