历史版本8 :图表刷新接口 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 版本编辑

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

2. 描述编辑

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

1）示例一（frm）

以Tab块下图表刷新为例，实现效果如下图：

222

2）示例二（cpt）

222

3. 实现方法编辑

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

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

4. 示例一（frm）编辑

4.1 制作模板

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

222

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

222

3）在第一个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();//刷新
4.3 保存预览

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

5. 示例二（cpt）编辑

5.1 制作模板

1）新建普通报表，添加Sql数据集：SELECT * FROM 销量 limit ${ int (RAND()*20) }

222

2）在模板中插入图表和悬浮图表，并添加按钮控件，这里就不详细介绍了如下图：

222

4.2 设置图表刷新

选中按钮控件，添加点击事件，如下：

222

JS代码如下：
var chartWrapper = FR.Chart.WebUtils.getChart("Float0");//获取到Float0这个悬浮图表 chartWrapper.dataRefresh();//刷新 var chartWrapper1 = FR.Chart.WebUtils.getChart("A6");//获取到A6单元格图表 chartWrapper1.dataRefresh([1,2]);//刷新第2、3个图表
5.3 保存预览

保存模板，选择数据分析预览方式，即可看到如上图示例二所示。

6. 已完成模板编辑

1）示例一

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

右击存储模板

2）示例二

已完成的模板，可参见：%FR_HOME%\webroot\WEB-INF\reportlets\doc\Advanced\Chart\图表刷新接口.cpt

点击下载模板