當前為10.0版本文檔,更多實例內容將在最新幫助文檔中展現,點選跳轉至 最新版幫助文檔

JS實現隐藏輪播圖正下方切換圓點

1. 概述

1.1 預期效果

在一些實際項目中,當使用圖表輪播功能時,輪播圖正下方默認會顯示輪播切換圓點,這些圓點的作用在於,用戶可以在圖表輪播過程中,手動選擇查看某一個圖表。但有時爲了不影響報表展示的美觀性,我們需要隐藏這些切換圓點。

Snag_5d44ba6.png

1.2 實現思路

分頁預覽設置中添加 JavaScript 「加載結束」腳本,用延遲函數隐藏圖表輪播切換圓點。

2. 示例

2.1 準備模板

1)新建模板,新建數據集 ds1,SQL語句爲:SELECT  *  FROM  銷量,如下圖所示:

Snag_5db3e07.png

2)合并 A1~I20 單元格,插入兩個圖表:柱形圖,餅圖,設置這兩個圖表的輪播間隔爲 2 秒。如下圖所示:

Snag_5e0ddaa.png

3)設置柱形圖的數據。如下圖所示:

Snag_5e38cad.png

4)設置餅圖的數據。如下圖所示:

Snag_5e51011.png

2.2 添加 JS 代碼

設計器菜單欄選擇模板>模板 Web 屬性>分頁預覽設置,添加加載結束事件。如下圖所示:

Snag_5eafc8c.png

JavaScript 代碼如下:

注:鼠标懸停在圖表上時,圖表不會自動輪播。

setTimeout(function({
$(".vanchart-menu").css("display""none");
}, 100);//100表示100毫秒後自動隐藏輪播切換圓點,可根據實際需求自行設置值

2.3 效果預覽

保存模板,點擊「分頁預覽」,效果如下圖所示:

FB8365BE-33AA-4CB9-837E-129E38AD4FB0.GIF

注1:不支持移動端。

3. 模板下載

已完成模板可參見:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS分頁預覽\JS實例\圖表輪播隐藏切換圓點.cpt

點擊下載模板:圖表輪播隐藏切換圓點.cpt

附件列表


主題: 原簡體文檔
  • 有幫助
  • 沒幫助
  • 只是瀏覽

文 檔回 饋

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

9s后關閉

反饋已提交

網絡繁忙