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

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

1.1 版本

1.2 功能簡介

FVS 中，支援普通圖表使用 openAutoTooltip API實現開啓自動資料點提示輪播功能。

注：不支援 擴展圖表 型別中輪播類的圖表，例如特殊形狀柱形圖支援，而輪播條形圖不支援。

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

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

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

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

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

以柱形圖、地圖為例。效果如下圖所示：

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