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

编辑
  • 文档创建者:zsh331
  • 浏览次数:289次
  • 编辑次数:7次
  • 最近更新:zsh331 于 2019-09-23
  • 1. 描述

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

    Snag_5d44ba6.png

    2. 思路

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

    3. 示例

    3.1 数据准备

    新建如下图所示数据集,查询销量表中的所有数据。

    Snag_5db3e07.png

    3.2 报表设计

    1)合并 A1~I20 单元格,插入两个图表:柱形图,饼图。设置这两个图表的轮播间隔为2秒。

    Snag_5e0ddaa.png

    2)设置柱形图的数据。

    Snag_5e38cad.png

    3)设置饼图的数据。

    Snag_5e51011.png

    3.3 添加 JS 代码

    1)设计器菜单栏选择模板>模板 Web 属性>分页预览设置,添加加载结束事件。

    Snag_5eafc8c.png

    2)在事件设置对话框中输入如下 JS 代码:

    setTimeout(function() { $(".vanchart-menu").css("display","none");}, 100);

    注1:100表示100毫秒后自动隐藏轮播切换圆点。(可根据实际需求自行设置值)

    注2:鼠标悬停在图表上时,图表不会自动轮播。

    Snag_5ebb9c1.png

    4. 效果预览

    保存报表,分页预览效果如下图所示:

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

    注1:不支持移动端。

    注2:上述 JS 脚本如写在“填报页面设置”或“数据分析设置”的加载结束事件中,请以对应方式预览报表,才能正确显示效果。

    5. 已完成模板

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

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

    附件列表


    主题: 二次开发
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]