2.1 预期效果

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

1）示例一：决策报表

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

2）示例二：普通报表

2.2 实现思路

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

注1：该方法涉及获取图表块对象接口FR.Chart.WebUtils.getChart("chartID")，该接口不支持移动端。

注2：该方法涉及图表刷新接口Chart.dataRefresh()，该接口支持移动端。

注3：由于涉及获取图表块对象接口，下面所有示例均不支持移动端预览。

注4：获取图表对象的方法参见文档：如何获取图表对象

3.1 模板制作

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

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

3）在第一个 Tab 块中拖入相应的报表块及图表，这里就不详细介绍了，如下图所示：

第二个 Tab 块中也拖入相应的报表块及图表，如下图所示：

3.2 设置图表刷新

选中 Tab0 控件，添加点击事件，如下图所示：

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 控件，添加点击事件，如下图所示：

JS 代码如下：

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

3.3 保存预览

保存模板，点击预览，如下图所示：

注：不支持移动端。

4.1 模板制作

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

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

4.2 设置图表刷新

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

JS 代码如下：

var chartWrapper = FR.Chart.WebUtils.getChart("Float0");//获取到 Float0 这个悬浮图表 
chartWrapper.dataRefresh();//刷新 
var chartWrapper1 = FR.Chart.WebUtils.getChart("A6");//获取到 A 6单元格图表 
chartWrapper1.dataRefresh([1,2]);//刷新第 2、3 个图表

4.3 保存预览

保存模板，选择数据分析预览方式，如下图所示：

注：不支持移动端。

5.1 示例一：决策报表

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

点击下载模板：Tab块下图表刷新.frm

5.2 示例二：普通报表

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

点击下载模板：图表刷新接口.cpt