反馈已提交

网络繁忙

统一切换轮播图表接口

  • 文档创建者:jiangsr
  • 编辑次数:18次
  • 最近更新:Alicehyy 于 2022-09-07
  • 1. 概述

    1.1 版本

    报表服务器版本
    功能变动
    11.0-

    1.2 预期效果

    某些场景下,需要让一张报表内的多个轮播图表同时切换。那么该如何实现呢?效果如下图所示:

    1591352217311209.gif

    1.3 实现思路

    按钮添加点击事件,通过 JS 脚本调用接口统一切换轮播图表,切换成功后,所有的轮播图表的计时器计时归 0。

    接口
    说明
    chart.unifiedSwitchCarouselChart(direction)

    direction 为可选参数,表示图表切换的方向

    1 表示切换到下一张图表,-1 表示切换到上一张图表

    注1:该接口不支持扩展图表。

    注2:该接口不支持移动端。

    2. 示例

    2.1 准备数据

    新建决策报表,新建数据库查询 ds1,输入 SQL 查询语句:SELECT * FROM 销量

    Snag_f9b1034.png

    2.2 设计报表

    将 1 个按钮控件和 2 个饼图拖到决策报表中,如下图所示:

    Snag_47ddbd4a.png

    2.3 设置饼图

    1)这 2 个饼图都新增一个「等弧玫瑰图」,作为图表2,如下图所示:

    1591353015365655.png

    2)所有的默认饼图和等弧玫瑰图绑定数据的方法一致,如下图所示:

    Snag_47e91816.png

    2.4 设置切换属性

    图表切换方式为「轮播」,显示轮播箭头,时间间隔设置为 10 秒。如下图所示:

    1591353251164181.png

    2.5 设置同步切换

    选中按钮控件,添加一个点击事件,输入 JavaScript 代码:

    VanCharts.unifiedSwitchCarouselChart(1); //VanCharts 指的是全局图表对象,无需再获取单独图表对象

    步骤如下图所示:

    Snag_47f43c71.png

    2.6 效果预览

    保存模板,点击「PC端预览」,效果如 1.2 预期效果所示。

    3. 模板下载

    已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\GraphSwitching\多图表实现统一切换.frm

    点击下载模板:多图表实现统一切换.frm

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭