多图表实现统一切换

编辑
文档创建者:jiangsr (98668 )     浏览次数:345次     编辑次数:3次     最近更新:jiangsr 于 2018-02-01     

目录:

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

附件列表


主题: 新图表
标签: 暂无标签 编辑/添加标签
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,请咨询帆软技术支持
关于技术问题,您还可以通过帆软论坛获取帮助,论坛上有非常多的大神,有些水平比帆软工程师还要高哦。
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

本文档是否有用?
谢谢! 我们非常感谢您的反馈。
提交反馈: