1. 概述
1.1 預期效果
在一些實際項目中,當使用圖表輪播功能時,輪播圖正下方默認會顯示輪播切換圓點,這些圓點的作用在於,用戶可以在圖表輪播過程中,手動選擇查看某一個圖表。但有時爲了不影響報表展示的美觀性,我們需要隐藏這些切換圓點。
1.2 實現思路
分頁預覽設置中添加 JavaScript 「加載結束」腳本,用延遲函數隐藏圖表輪播切換圓點。
2. 示例
2.1 準備模板
1)新建模板,新建數據集 ds1,SQL語句爲:SELECT * FROM 銷量,如下圖所示:
2)合并 A1~I20 單元格,插入兩個圖表:柱形圖,餅圖,設置這兩個圖表的輪播間隔爲 2 秒。如下圖所示:
3)設置柱形圖的數據。如下圖所示:
4)設置餅圖的數據。如下圖所示:
2.2 添加 JS 代碼
設計器菜單欄選擇模板>模板 Web 屬性>分頁預覽設置,添加加載結束事件。如下圖所示:
JavaScript 代碼如下:
注:鼠标懸停在圖表上時,圖表不會自動輪播。
setTimeout(function() {
$(".vanchart-menu").css("display", "none");
}, 100);//100表示100毫秒後自動隐藏輪播切換圓點,可根據實際需求自行設置值
2.3 效果預覽
保存模板,點擊「分頁預覽」,效果如下圖所示:
注1:不支持移動端。
3. 模板下載
已完成模板可參見:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS分頁預覽\JS實例\圖表輪播隐藏切換圓點.cpt
點擊下載模板:圖表輪播隐藏切換圓點.cpt