地圖鑽取與聯動

1.1 預期效果

• 範本中包含地圖和表格，地圖可實現鑽取，表格中資料可以跟隨地圖鑽取省份進行聯動。

• 範本中地圖與圖表進行聯動，點選地圖中某個城市，圖表展示該城市的資料。

如下圖所示：

1.2 實現思路

透過設定參數聯動「鑽取區域地圖」和其他組件，但聯動其他圖表時，由於地圖各層級資料需要先進行匯總處理，所以圖表需要使用儲存格資料源。

注1：在普通報表中，要實現圖表傳參給儲存格，需藉助動態參數，詳情可參考文檔 鉆取的資料顯示在當前頁面  。

注2：決策報表中操作與本文類似，詳情可參考歷史文檔 决策报表地圖鑽取與聯動 。

本範例使用內建「地圖」資料表進行講解，其中「省份」欄位既包含了省又包含了市。若資料中的省市區分別是三個欄位，請查看範例二。

2.1 建立範本

點選設計器左上角「檔案>建立視覺化看板>建立空白視覺化看板」。

根據實際情況自訂範本名稱、尺寸，選擇範本樣式為「淺色主題一」，最後點選「建立看板」。

2.2 準備資料

1）新增資料庫查詢 ds1，SQL 查詢語句為：SELECT * FROM 地圖。如下圖所示：

2）點選設計器左上角「範本>範本參數」，新增一個範本參數，雙擊參數名稱重新命名為 province。用於地圖聯動時過濾「省份」資料。

2.3 設計鑽取區域地圖

2.3.1 新增鑽取區域地圖

1）在組件區點選「圖表>地圖類>鑽取區域地圖」，將其新增到畫布中。

2）在右側「內容」配置面板中，選擇 GIS 圖層為「標準>mapbox」。

2.3.2 綁定地圖資料

右側「內容」配置面板選擇「資料>資料」，選擇「各層級分別指定」。

根據讀取的地圖檔案，預設有 3 個層級，這裏只需要設定「第1層」和「第2層」的資料即可：

• 第1層：選擇 ds1 資料集中「pid」欄位，展示中國各個省的地圖資料

• 第2層：選擇 ds1 資料集中「省份」欄位，展示鑽取的省份下各市的地圖資料

2.4 設計表格

2.4.1 新增表格組件

在組件區點選「文字>表格」，將其新增到畫布中。點選右側「內容」配置面板中「編輯組件」即可進入編輯介面。

2.4.2 設計表格內容

表格根據點選的地圖省市一一對應顯示，並用柱形圖輔助展現資料，柱形圖資料來源於儲存格。

最終樣式如下圖所示：

1）設定標題

合併 A1~E1 儲存格，在 A1 儲存格插入公式：if(len($province) = 0 || $province = "中國", "全國資料", $province + "資料")

公式說明：作為表格的標題，可隨着 province 參數動態變化，且當 province 為空或等於「中國」時，標題為全國資料。

2）A2~E2 儲存格輸入對應標題，A3~E3 儲存格拖入 ds1 資料集中對應欄位，具體設定如下表所示：

注：A3 儲存格在後續步驟中需新增過濾條件，新增後，B3 儲存格無法預設跟隨 A3 儲存格展示資料，故 B3 儲存格需要新增過濾條件跟隨 A3 儲存格，而其他儲存格左父格需設定為 B3 儲存格。

3）為了與地圖產生聯動，A3 儲存格需要新增過濾條件：

雙擊 A3 儲存格，選擇「過濾」，新增過濾條件為：(列名：省份)等於 F(x)：if(len($province) = 0 || $province = "中國",ds1.select(省份, len(pid) = 0),$province)

條件說明：當 province 為空或等於「中國」時，獲取 ds1 資料集中滿足「pid」為空的「省份」資料，參數不為空時根據參數 province 顯示資料。

4）A3 儲存格設定過濾條件之後， B3 儲存格無法根據 A3 儲存格顯示資料，故設定過濾條件使其跟隨 A3 儲存格顯示資料。

雙擊 B3 儲存格，選擇「過濾」，新增過濾條件為：(列名：省份) 等於儲存格 A3。

5）設定條件屬性

給 A3 儲存格設定一個「新值」條件屬性，實現當參數 province 為空或等於「中國」時，A3 儲存格顯示為字串「全國」。

條件屬性：新值為字串「全國」，條件為公式= len($province) = 0 || $province = "中國"  。

2.4.3 設定柱形圖

1）合併一片儲存格區域，點選工具欄「插入圖表」插入柱形圖。

2）柱形圖的資料來源選擇「儲存格資料」，詳情可參見文檔：圖表儲存格資料源 。

• 分類名：=A3，表示點選的省份

• 系列名：=[B2:E2]，表示 B2 儲存格到 E2 儲存格的資料

• 系列值：=[B3:E3]，表示 B3 儲存格到 E3 儲存格的資料

3）設定完成後，點選「傳回視覺化看板」回到畫布介面。

2.5 設定組件聯動

選中鑽取區域地圖，在「交互>點選事件」面板，點選「新增點選事件」，支援選擇事件物件和事件類型。

2.5.1 設定圖形組件聯動

對圖形設定事件，即點選地圖區域時可實現交互效果。

1）事件物件選擇「圖形」，事件類型選擇「組件聯動」，點選「確定」。

2）自訂事件名稱，聯動範圍選擇「指定物件」，選擇「頁面1_表格1_頁面1」（此處組件名稱自帶頁面前綴）。

3）新增 province 參數，參數類型選擇「當前組件欄位」，參數內容選擇「區域名」。

2.5.2 設定鑽取目錄組件聯動

對「鑽取目錄」設定事件，即點選地圖左上角目錄時可實現交互效果；若不設定，則點選目錄無交互效果

事件物件選擇「鑽取目錄」，其餘設定與 2.5.1 節相同。自訂事件名稱時，注意不能重名。

2.6 效果預覽

儲存範本，點選「預覽」，效果如 1.1 節預期效果所示。

App 端和 HTML5 端均支援。

本例針對資料表中省市區分別存放在不同欄位的情況。僅使用內建資料集作簡單示範。

3.1 建立頁面

本例將直接在範例一範本中建立頁面示範，除資料不同，表格內容不同外，其餘設定基本一致。

點選建立頁面，建立「頁面2」，在 頁面2 中同樣新增一個「鑽取區域地圖」和「表格組件」。

3.2 準備資料

建立 內建資料集 Embedded1。範例資料如下圖所示：

3.3 設計鑽取地圖

選中地圖，在右側「內容」配置面板選擇「資料>資料」，選擇「各層級分別指定」，分別選擇 Embedded1 資料集中的省、市、區欄位。

注：綁定區域名後，可以點選右側設定按鈕，查看下區域名是否正確匹配。詳情請參見文檔：地圖模糊匹配 。

3.4 設計表格

1）表格內容及樣式如下圖所示：

2）每個儲存格的內容、設定項及作用如下表所示：

3）雙擊 B3 儲存格，設定過濾條件為：(列名:省) 等於 $province or (列名:市) 等於 $province or (列名:區) 等於 $province 。 

如下圖所示：

4）設定條件屬性

B3 儲存格條件屬性：新值為字串「全國」，條件為公式= len($province) = 0 || $province = "中國"  。

說明：當 province 為空或為「中國」時，B3 儲存格等於 B1 儲存格的值。

同理設定 C3 儲存格條件屬性，實現當 province 為空或為「中國」時，C3 儲存格等於 C1 儲存格的值。

5）柱形圖綁定儲存格資料，詳細內容可參考 2.4.3 ，具體如下所示：

• 分類名：=A3，表示點選的省份

• 系列名：=[B2:C2]，表示 B2 儲存格到 C2 儲存格的資料

• 系列值：=[B3:C3]，表示 B3 儲存格到 C3 儲存格的資料

3.5 設定組件聯動

參考 2.5 節設定組件聯動，聯動物件選擇 頁面2 的表格組件即可。

以圖形聯動為例，聯動物件選擇「頁面2_表格1_頁面2」，其餘設定均相同。如下圖所示：

3.6 效果預覽

儲存範本，點選「預覽」，效果如下圖所示：

App 端和 HTML5 端均支援。

點選下載範本：FVS實現地圖鑽取於聯動.fvs