最新历史版本 :统一切换轮播图表接口 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 版本

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

1.2 预期效果

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

AD.gif

1.3 实现思路

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

接口
说明
chart.unifiedSwitchCarouselChart(direction)

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

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

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

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

注3：FVS不适用本文方法，类似效果可参考文档 FVS实现多个Tab组件同步切换

注4：决策报表和普通报表设置方法和代码相同

2. 示例编辑

2.1 准备数据

点击设计器左上角「文件>新建普通报表」，新建数据集 ds1，数据库查询语句如下：SELECT * FROM 销量

SQl.png

2.2 插入图表

1）合并两片单元格区域，分别选中单元格后点击上方工具栏插入图表按钮，各插入一个「饼图」。如下图所示：

CT.png

2）点击「笔型图标」进入控件面板，将一个按钮控件拖拽到下方空白处。如下图所示：

插入图表1.png

2.3 设置饼图

1）给两个饼图都新增一个「等弧玫瑰图」，如下图所示：

Type.png

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

数据绑定.png

3）所有的饼图和玫瑰图取消勾选「标题可见」，如下图所示：

YS.png

2.4 设置切换属性

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

loop.png

2.5 设置同步切换

1）进入控件面板，点击右侧「组件设置>para>属性」，取消勾选「点击查询前不显示报表内容」，如下图所示：

CT.png

2）选中按钮控件，设置控件大小，更改按钮名称为「同步切换」，自定义初始背景为「蓝色」，如下图所示:

shuxi.png

3）选中按钮控件，添加一个点击事件，输入 JavaScript 代码：

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

如图所示：

JS.png

2.6 效果预览

保存模板，点击「分页预览」，如图 1.2 节所示:

3. 模板下载编辑

点击下载模板：多图实现统一切换.cpt