[新]图表切换接口

编辑
文档创建者:jiangsr (98668 )     浏览次数:453次     编辑次数:5次     最近更新:ukae 于 2018-08-29     

目录:

1.版本编辑

设计器版本  jar包版本  
  9.0  2018-1-24

2. 描述编辑

 图表在实现切换的过程中,往往是按照从左往右或从右往左的顺序来切换的。那么如何实现跳跃式切换呢?实现效果如下图:

222

3. 实现方法编辑

图表自身提供一个接口,可以实现跳跃切换。

即给某个图表设置JavaScript超链,跳跃切换到指定的图表。

3.1 接口的说明
展示index对应下标的图表
// index为可选参数(默认为0,即第一个图表), 表示图表index下标。 //如index=3,则展示第四个图表 FR.Chart.WebUtils.getChart(chartId).showIndexChart(index);

4. 示例编辑

4.1 制作模板

新建决策报表,添加sql数据集。如下图:

222

将雷达图图表块拖进决策报表中,如下图:

222

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

222
222

点击右侧+号,添加图表2、3、4,其中图表4类型为饼图,并设置图表的类型、数据、样式和特效

222

222

222

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

设置图表切换属性
222

4.2 设置跳跃切换

选中默认图表即雷达图1,添加JavaScript超链,调用跳跃切换接口,展示图表4。如下:

222

代码如下:

FR.Chart.WebUtils.getChart("chart2").showIndexChart(3);
注:获取到“chart2”图表控件,展示第四个图表块。showIndexChart()参数从0开始。
同理,给图表4设置JavaScript超链,跳转到图表2,如下:
222

5. 保存预览编辑

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

已完成模板可参考%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\GraphSwitching\图表跳跃切换.frm


附件列表


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

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

此页面有帮助吗? [ 去社区提问 ]