JS實現FVS表格跑馬燈

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

1.1 版本

1.2 預期效果

FVS 視覺化看板 V1.14.0 及之後版本中，可透過 跑馬燈特效 功能直接實現跑馬燈效果，且標題/富正文/表格組件均支援。

同時表格組件還支援透過 JS 實現跑馬燈效果。預期效果如下圖所示：

1.3 實現思路

API詳細介紹請參見文檔：跑馬燈API 。

表格組件新增跑馬燈事件有三種方式：

• 表格組件新增「初始化後事件」。詳情請參見「範例一 2.4.1 節」。

• 透過其他組件設定「點選事件」實現點選開啟捲動和停止捲動。詳情請參見「範例一 2.4.3 節」。

• 在看板編輯介面新增「範本>頁面載入結束事件」。詳情請參見「第 3 章範例二」。

1.4 注意事項

startMarquee() API在 V1.14.0 版本中，為了對齊跑馬燈特效功能配置項，對API參數做了相應的優化。具體如下表所示：

注：舊API在新版本插件中可以相容，新API不支援在舊版本插件中使用。舊API範例文檔可參考：FVS跑馬燈舊API版本。

2.1 建立範本

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

2.2 準備資料

建立資料庫查詢 ds1 ，SQL 查詢語句為：SELECT * FROM 銷量。

2.3 設計表格

2.3.1 新增組件

在左側組件區選擇「文字>表格」，點選即可新增到頁面中。

點選右側配置區「組件」，將組件名稱修改為「表格」，該名稱會在跑馬燈事件中用到。

然後點選組件右上角的編輯按鈕 ，或點選配置區「內容>編輯組件」，即可進入表格編輯介面。

2.3.2 設計表格內容

手動輸入標題列後，將對應的欄位拖入到儲存格中，將 A2 儲存格的「儲存格元素>資料設定」修改為「列表」，使表格內容較長，能更好的看到捲動效果。

設定好資料後，可自行修改儲存格填充背景、字體大小等，最終表格樣式如下圖所示：

2.3.3 重複凍結列

表格捲動時，若希望標題列凍結，只有內容捲動，就需要設定重複凍結標題列了。

點選上方工具欄中的凍結按鈕 ，彈出重複與凍結設定框，勾選重複標題列後，再勾選凍結列，然後點選「確定」。

完成所有設定後，點選「儲存」按鈕，再點選「傳回視覺化看板」即可傳回畫布編輯介面。

2.4 新增跑馬燈事件

2.4.1 向上捲動範例

回到畫布後，選中表格組件，點選右側配置區「互動>事件」，新增「初始化後事件」。輸入 JavaScript 程式碼：

注：程式碼中的「表格」是該表格組件的名稱，需根據實際情況自行修改。

setTimeout(() => {
	duchamp.getWidgetByName("表格").startMarquee(       
{           
	mode:'item', //捲動內容為逐條捲動
    speed:30, //捲動速度為 30px/s
    to:'top', //捲動方向為向上捲動
    stopOnHover:true,  //滑鼠懸浮時停止捲動
    joinable:true, //捲動方式為首尾相接
     }
); }, 500)

步驟如下圖所示：

到這一步我們已經完成一個表格組件的向上捲動效果的設定了，我們點選範本右上角的「預覽」按鈕，預覽效果如下圖所示：

2.4.2 向左捲動範例

1）重新整理增一個表格組件，將其組件名稱設定為「表格2」。

表格內容，我們只需將標題縱向排布，資料欄位儲存格的擴展屬性修改為「橫向擴展」即可。如下圖所示：

2）對於標題縱向排布的表格，設定重複凍結時需要選擇「標題欄」。如下圖所示：

3）同樣給表格組件新增一個「初始化後事件」，輸入向左捲動的 JavaScript 程式碼：

setTimeout(() => {
	duchamp.getWidgetByName("表格2").startMarquee(       
{           
	mode:'item', //捲動內容為逐條捲動
    speed:30, //捲動速度為 30px/s
    to:'left', //捲動方向為向左捲動
    stopOnHover:true,  //滑鼠懸浮時停止捲動
    joinable:true, //捲動方式為首尾相接
     }
); }, 500)

4）效果預覽

2.4.3 點選停止捲動

除了表格自身的載入結束事件，我們還可以透過給 標題組件 新增「點選事件」，實現跑馬燈的開始與停止。這裏我們以停止捲動為例，進行操作示範。

1）選擇組件區「文字>標題」，點選新增到頁面中，在配置區「內容」中修改標題顯示正文內容為「點選停止捲動」。如下圖所示：

2）在選中標題組件的情況下，點選配置區「互動>點選事件」，新增一個 JavaScript 事件，JavaScript 程式碼如下：

setTimeout(() => {
        duchamp.getWidgetByName("表格").stopMarquee();
        duchamp.getWidgetByName("表格2").stopMarquee()
}, 500)

步驟如下圖所示：

2.5 效果預覽

預覽後捲動，點選標題停止捲動，預覽效果如下圖所示：

注：不支援行動端。

本例講解的是表格組件使用範本的「頁面載入結束事件」實現多個分頁多個表格的跑馬燈效果。預期效果如下圖所示：

3.1 範本準備

建立範本、新增表格組件等操作，均可參考範例一，這裏不再贅述，只簡單講解下範本的內容。

1）範本中包含兩個分頁，分別為「頁面1」和「頁面2」。

2）兩個分頁上各有一個表格，表格名稱均為「表格」。

注：不同分頁的組件名稱可以相同，同一分頁的組件名稱不能相同。

如下圖所示：

3.2 新增跑馬燈事件

在菜單欄頂部的範本中選擇「頁面載入結束事件」，輸入 JavaScript 程式碼：

duchamp.on("storychange", (current) => {
        setTimeout(() => {
                if (current === "頁面1") {
                        duchamp.getWidgetByName("表格").startMarquee({
                                mode:'item',
                                speed:30,
                                to:'top',
                                stopOnHover:true,
                                joinable:true,                         
                        });
                };
                if (current === "頁面2") {
                        duchamp.getWidgetByName("表格").startMarquee()
                }
        }, 500);
});

注：因為「頁面載入結束事件」只在初次載入的時候運作一次，所以上述程式碼中加上了分頁切換的 JS，可實現多個分頁的表格開啟跑馬燈效果，且頁面切換時表格依然保持跑馬燈效果。

步驟如下圖所示：

完成後點選儲存預覽即可。

注：不支援行動端。

點選下載範本：

FVS表格跑馬燈範例.fvs

FVS表格跑馬燈範例二.fvs