1.1 问题描述

扩展图表单个组件刷新的实现方法跟普通图表有所不同，因而单独拿出来详细介绍下。

1.2 实现思路

JS 实现图表组件刷新时，普通图表使用的是 dataRefresh() 这个接口，扩展图表需使用 dealReloadChartAjax() 接口实现。

注：在 FVS可视化看板中，图表刷新请直接使用组件刷新接口 refresh() 。

2.1 数据准备

新建一张决策报表，新建内置数据集 Embedded1，详细数据如下图所示：

2.2 添加组件

将三个组件：报表块、饼图、扩展图表-轮播夜光仪表盘，分别拖拽到决策报表设计主体中，排版如下图所示：

2.3 设置报表块

如下图设计报表块样式，A2~D2 绑定和标题相同的字段即可。

双击 A2 单元格，添加一个过滤条件，地区字段绑定饼图中的参数 $area，如下图所示：

2.4 图表绑定数据

1）选中饼图，双击进入编辑状态，在右下方属性面板，如下图绑定内置数据集数据。

2）选中轮播夜光仪表盘，仪表盘绑定报表块中的单元格数据，插入公式如下：

播放维度：=report0~B2

指标值：=report0~C2

目标值：=report0~D2

2.5 设置超级链接

1）双击编辑饼图，点击「特效>交互属性」，添加一个「当前表单对象」的超级链接，点击「编辑」按钮。

表单对象下拉选择报表块「report0」，添加 area 参数，参数值选择「系列名称」，以便后面的步骤实现点击饼图可以联动报表块，改变报表块的数据。

2）再添加一个 JavaScript 的超级链接，重命名为监控刷新，点击「编辑」按钮。插入如下 JS 代码：

var c=FR.Chart.WebUtils.getChart("chart1");
c.dealReloadChartAjax();

2.6 效果预览

报表决策报表，点击「PC端预览」，组件刷新效果如下图所示：

注：不支持移动端预览。

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\扩展图表监控刷新.frm

点击下载模板：扩展图表监控刷新.frm