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

目录:

1.描述编辑

用户在使用过程中，需要让一张页面内的多个轮播图表同时切换。若设置相同的轮播间隔时间，由于页面初始化的时候，不同的图表块请求json和实例化导致的时间间隔，导致不同图表之间的切换有一定的间隔。于是，根据需求，图表自身提供一个接口，可以用来统一切换当前页面上的所有设置了自动轮播的图表。效果如下图：

222

2.实现方法编辑

用户通过JS脚本调用接口，实现页面内所有轮播图表的切换，切换成功后，所有的轮播图表的计时器计时归0，比如说：现在有一个cpt报表文件，上面有两个轮播图表A和B，A和B同时设置了轮播间隔为10s，那么默认的状态应该是A和B每隔10s进行一次图表切换，假如我在页面加载完成的第8s时候，调用了接口，则A和B同步切换图表，切换成功后，A和B的计时器计时归0，10s后A和B继续自动切换。

2.1 接口的说明

1）全局对象VanCharts上新增一个方法unifiedSwitchCarouselChart，用于统一切换轮播图表：

VanCharts.unifiedSwitchCarouselChart(direction); // direction为可选参数, 表示图表切换的方向:1表示切换到下一张图表，-1表示切换到上一张图

2）单个图表切换，用于切换某个指定的轮播图表：

备注：如何获取图表对象

// direction为可选参数, 表示图表切换的方向:1表示切换到下一张图表，-1表示切换到上一张图表，默认为1 FR.Chart.WebUtils.getChart(chartId).switchCarouselChart(direction);

3）展示index对应下标的图表

// index为可选参数（默认为0，即第一个图表）, 表示图表index下标。 //如index=3，则展示第四个图表 FR.Chart.WebUtils.getChart(chartId).showIndexChart(index);

3.示例编辑

3.1 制作模板

新建决策报表，添加sql数据集。如下图：
222

将饼图图表块拖进决策报表中，如下图：
222

选中图表，类型为饼图，并依次设置图表的类型、数据、样式和特效，这里不再一一介绍

222
222

点击右侧+号，添加图表2，类型为等弧度玫瑰图，并设置图表的类型、数据、样式和特效

222

注：如果新建的第一个图表为新图表，则新增图表切换后，图表类型面板内只能在新图表之间切换；如果新建的第一个图表为老图表，则新增图表切换后，图表类型面板内只能在老图表之间切换。

设置图表切换属性

222

同理，再拖进一个饼图图表块，设置同上。

3.2 设置同步切换

在报表中，拖进按钮控件，并设置属性，如下图：

222

添加js点击事件，调用统一切换接口。如下：

222

代码如下：

VanCharts.unifiedSwitchCarouselChart(direction);

4.保存预览编辑

保存模板，点击预览，即可看到如上图所示效果。

已完成模板可参考%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\多图表实现统一切换.frm