JS实现隐藏轮播图正下方切换圆点

1.1 预期效果

在一些实际项目中，当使用图表轮播功能时，轮播图正下方默认会显示轮播切换圆点，这些圆点的作用在于，用户可以在图表轮播过程中，手动选择查看某一个图表。但有时为了不影响报表展示的美观性，我们需要隐藏这些切换圆点。

1.2 实现思路

分页预览设置中添加 JavaScript 「加载结束」脚本，用延迟函数隐藏图表轮播切换圆点。

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：不支持移动端。

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS分页预览\JS实例\图表轮播隐藏切换圆点.cpt

点击下载模板：图表轮播隐藏切换圆点.cpt