FVS基礎圖表實現數據點提示輪播

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

1.1 版本

1.2 預期效果

FVS 中，支援普通圖表使用 openAutoTooltip API實現開啟自動資料點提示輪播功能。效果如下圖所示：

注：擴展圖表類型僅支援特殊形狀柱形圖，其餘擴展圖表不支援。

1.3 API說明

openAutoTooltip([delay, initPoints]) API說明如下：

• delay：資料點提示的切換時間間隔，預設為 3000ms ，即 3s 。

• initPoints：輪播資料點提示對應的資料點集合，預設為圖表內所有資料。

若要實現範本初始化時就開啟提示點輪播，可將程式碼寫在「頁面載入結束事件」中，JavaScript 程式碼寫法如下：

duchamp.on("storychange", (current) => {
setTimeout(() => {
  if (current === "頁面1") {
    duchamp.getWidgetByName("圖表組件").openAutoTooltip(3000);
  }
 }, 3000)
});

若要獲取圖表的部分系列資料，可參考如下程式碼：

duchamp.on("storychange", (current) => {
setTimeout(() => {  
    if (current === "頁面1") {
        var vanchart=duchamp.getWidgetByName("圖表組件");
        vanchart.openAutoTooltip(1000,vanchart.getSeries()[0].points); //資料點取圖表組件第一個系列所有資料點
    } 
  }, 3000)
});

注：V2.4.0 及之後版本才能使用 initPoints 參數。

2.1 建立視覺化看板

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

2.2 準備資料

建立兩個資料庫查詢：

1）ds1 輸入 SQL 查詢語句：SELECT * FROM 銷量 。用於綁定柱形圖資料。

2）ds2 輸入 SQL 查詢語句：SELECT * FROM 地圖 。用於綁定地圖資料。

2.3 新增柱形圖

點選組件區「圖表>柱形圖」，將其新增到「頁面1」中，並綁定資料如下圖所示：

2）選中柱形圖，點選右側配置面板「組件」，設定組件名稱為「柱形圖」。如下圖所示：

2.4 新增地圖

1）點選畫佈下方的「建立頁面」，建立「頁面2」。如下圖所示：

2）點選組件區「圖表>區域地圖」，將其新增到「頁面2」中，並綁定資料如下圖所示：

3）選中地圖，點選右側配置面板「組件」，設定組件名稱為「地圖」。如下圖所示：

2.5 新增頁面載入結束事件

點選「範本>頁面載入結束事件」，輸入 JavaScript 程式碼如下：

duchamp.on("storychange", (current) => {
  if (current === "頁面1") {
    duchamp.getWidgetByName("柱形圖").openAutoTooltip();
  }
  if (current === "頁面2") {
    duchamp.getWidgetByName("地圖").openAutoTooltip();
  }
});

如下圖所示：

2.6 效果預覽

2.6.1 PC 端

點選右上角「儲存」，再點選「預覽」。效果如下圖所示：

2.6.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：FVS中基礎圖表實現資料提示點輪播.fvs