1.1 预期效果

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

1）示例一：决策报表

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

2）示例二：普通报表

1.2 实现思路

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

注1：该接口不支持移动端。

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

2.1 模板制作

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

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

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

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

2.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();//刷新

2.3 保存预览

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

注：不支持移动端。

3.1 准备数据

新建普通报表，新建数据集 ds1，SQL 查询语句为：SELECT * FROM 销量 limit ${ int (RAND()*20) }

注：int(RAND()*20)表示随机生成大于等于 0 小于 20 的随机整数，跟 limit 配合使用，达到刷新后改变数据项个数的目的。

3.2 设计表格

A4 单元格添加按钮控件，A6 单元格插入饼图，再插入一个悬浮元素饼图 Float0，如下图所示：

注：右键悬浮元素，弹出的列表点击设置悬浮元素名称，可以自定义悬浮元素的名称，后面接口调用时会用到这个名称。

3.3 设计图表

3.3.1 单元格元素图表

1）选中 A6 单元格，默认图表选择饼图。如下图所示：

绑定饼图数据，如下图所示：

2）点击，新增一个图表2，类型选择柱形图，如下图所示：

绑定柱形图数据，如下图所示：

3）点击，新增一个图表3，类型选择条形图，如下图所示：

绑定条形图数据，如下图所示：

3.3.2 悬浮元素图表

1）选中悬浮元素图表 Float0，默认图表设置为饼图，如下图所示：

绑定饼图数据，如下图所示：

2）点击，新增一个图表2，类型选择饼图，如下图所示：

绑定饼图数据，如下图所示：

3.4 设置图表刷新

选中 A4 单元格，点击控件设置>事件>添加事件，给按钮控件添加一个点击事件，如下图所示：

3.5 效果预览

3.5.1 PC 端

保存模板，点击数据分析预览，效果如下图所示：

3.5.2 移动端

示例包含悬浮元素图表，故无法在移动端预览。但刷新接口是支持移动端的。

4.1 示例一

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

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

4.2 示例二

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

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