[新]图表刷新接口

编辑
文档创建者:jiangsr (98668 )     浏览次数:607次     编辑次数:4次     最近更新:jiangsr 于 2018-04-10     

目录:

1. 版本编辑

  设计器版本  图表(新特性)插件
  8.0  V8.6.6及以上
  9.0  


2. 描述编辑

点击报表块或者表单中的某个按钮,触发某个图表的刷新事件,即图表重新获取数据并展示出来

以Tab块下图表刷新为例,实现效果如下图:

222

3. 实现方法编辑

开放接口,用户可以通过js触发图表本身的刷新。

通过FR.Chart.WebUtils.getChart("name").dataRefresh(),获取到要刷新的图表对象,在表单中实现刷新,其中“name”为图表块控件名。

4. 示例编辑

4.1 制作模板

新建决策报表,添加Sql数据集:SELECT 销售员|| ${ int (RAND()*8)} as 销售员,销量 FROM 销量

222

将Tab块拖入到报表中,添加2个Tab块并修改其标题,如下图:

222

在第一个Tab块中拖入相应的报表块及图表,这里就不详细介绍了如下图:

222

第二个Tab块中也拖入相应的报表块及图表,如下图:

222

4.2 设置图表刷新

选中Tab0控件,添加点击事件,如下:

222

JS代码如下:
var chartWrapper = FR.Chart.WebUtils.getChart("chart0");//获取到chart0这个图表控件 chartWrapper.dataRefresh();//刷新 var chartWrapper1 = FR.Chart.WebUtils.getChart("A1");//获取到A1这个图表控件 chartWrapper1.dataRefresh();//刷新 var chartWrapper2 = FR.Chart.WebUtils.getChart("A18");//获取到A18这个图表控件 chartWrapper2.dataRefresh([1]);//刷新该控件下的第二个图表块

注:

FR.Chart.WebUtils.getChart("name"),表示获取到指定的图表控件。

.dataRefresh(),表示刷新指定的图表控件;也可添加参数,指定到具体的某个图表块。如:.dataRefresh([1]),其中[1]表示刷新该报表块下的第二个图表块,参数从0开始。

同理,选中Tab1控件,添加点击事件,如下:

222

JS代码如下:

var chartWrapper = FR.Chart.WebUtils.getChart("chart1");//获取到chart1这个图表控件 chartWrapper.dataRefresh();//刷新

5. 保存预览编辑

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

已完成模板可参考%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Advanced\Chart\Tab块下图表刷新.frm





附件列表


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

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

此页面有帮助吗?