FVS圖表提示輪播聯動其他組件

適用場景：安裝了「FineVis資料視覺化」插件的使用者，可參考本文了解 FVS 範本的相關功能。

1.1 版本

1.2 預期效果

FVS基礎圖表實現資料點提示輪播 時，希望輪播的同時可以聯動其他組件。效果如下圖所示：

注：不支援 擴展圖表 。

2.1 建立範本

點選設計器左上角「檔案>建立視覺化看板」，建立一張空白看板，可自訂範本名稱和尺寸。如下圖所示：

2.2 準備資料

在左下方建立兩個資料庫查詢，查詢語句分別為：

ds1：SELECT * FROM 地圖

ds2：SELECT * FROM 地圖 where 1=1 ${if(len(area)=0,""," and pid='"+area+"'")}

ds2 中的參數 area 是聯動的關鍵，資料點提示輪播時需透過 area 參數傳遞地區，使圖表資料集中 SQL 獲取到該地區的資料，可自訂初始值。

2.3 設計範本

2.3.1 新增組件

在組件區找到標題、表格、餅圖、區域地圖組件，新增到畫布中，調整到合適的佈局。如下圖所示：

2.3.2 綁定圖表資料

1）選中區域地圖組件，綁定地圖資料如下圖所示：

2）選中餅圖組件，綁定餅圖資料如下圖所示：

2.3.3 設定標題組件

標題內容輸入公式 $area ，則標題會根據參數 area 變化。如下圖所示：

2.3.4 設定表格組件

選中表格組件，點選右側面板「內容>編輯組件」進入編輯介面，將 ds2 資料集中的欄位拖入儲存格，自訂標題欄即可。

點選表格編輯介面左上角「傳回視覺化看板」按鈕傳回畫布。如下圖所示：

2.4 新增頁面載入結束事件

點選設計器頂部「範本>頁面載入結束事件」，輸入 JavaScript 程式碼：

setTimeout(function(){
 var vanchart = duchamp.getWidgetByName("區域地圖1_頁面1").getInstance();//獲取vancharts物件
 var oldChartShowTooltip = vanchart.showTooltip;//記錄原來的showtooltip
 vanchart.showTooltip = function(point) { //重寫showtooltip
     oldChartShowTooltip.apply(vanchart, Array.prototype.slice.call(arguments));
     var areaName = point.name;
     duchamp.getWidgetByName("表格1_頁面1").refresh({area: areaName});
     duchamp.getWidgetByName("標題1_頁面1").refresh({area: areaName});
     duchamp.getWidgetByName("餅圖1_頁面1").refresh({area: areaName});
     //tooltip變化後傳參給對應組件並重新整理
   }
  setTimeout(function(){
    duchamp.getWidgetByName("區域地圖1_頁面1").openAutoTooltip("3000")//tooltip自動輪播
  },1000);
},500);
显示代码

如下圖所示：

注：FVS V2.2.1 版本新增參數全局聯動API linkageGlobal ，可將上述程式碼中獲取多個組件傳參重新整理的部分用這個API更換，參考如下。

setTimeout(function(){
 var vanchart = duchamp.getWidgetByName("區域地圖1_頁面1").getInstance();//獲取vancharts物件
 var oldChartShowTooltip = vanchart.showTooltip;//記錄原來的showtooltip
 vanchart.showTooltip = function(point) { //重寫showtooltip
     oldChartShowTooltip.apply(vanchart, Array.prototype.slice.call(arguments));
     var areaName = point.name;
     duchamp.linkageGlobal({area: areaName});
     //tooltip變化後傳參全局聯動
   }
  setTimeout(function(){
    duchamp.getWidgetByName("區域地圖1_頁面1").openAutoTooltip("3000")//tooltip自動輪播
  },1000);
},500);
显示代码

2.5 效果預覽

點選右上角「儲存」，再點選「預覽」。效果如 1.2 節所示。

注：不支援行動端。

點選下載範本：FVS圖表提示輪播聯動其他組件.fvs