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

目录:

1. 概述编辑

1.1 预期效果

点击按钮可以刷新普通报表或决策报表中的图表，以决策报表 Tab 块下图表刷新为例，效果如下图所示：

222

1.2 实现思路

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

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

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

注3：决策报表的报表块内图表不支持调用该接口。

2. 示例一：决策报表图表刷新编辑

2.1 准备数据

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

注：int(RAND()*8)表示随机生成大于等于 0 小于 8 的随机整数，目的是为了刷新后可以改变数据项个数。

Snag_efa81ca.png

2.2 设计报表

2.2.1 插入Tab块

将 Tab 块拖到决策报表中，新增 2 个标签页：Tab0 和 Tab1。Tab0 标题改为：TAB 块下整体刷新，Tab1 标题改为：TAB 块下单个图表块刷新。如下图所示：

Snag_f02efde.png

2.2.2 设计Tab0

1）Tab0 中拖入 1 个报表块 report0 和 1 个柱形图 chart0 ，如下图所示：

Snag_f090fec.png

2）设计 report0

report0 中 A1 单元格插入柱形图，A18 单元格插入柱形图，如下图所示。

Snag_f0fb140.png

选中 A1 单元格，绑定柱形图数据，如下图所示：

Snag_f124355.png

选中 A18 单元格，绑定默认柱形图数据，如下图所示：

Snag_f147930.png

选中 A18 单元格，点击Snag_f16c9f6.png，新增图表2，类型选择条形图，如下图所示：

Snag_f171ff6.png

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

Snag_f19060b.png

3）设计 chart0

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

Snag_f1aeb75.png

2.2.3 设计Tab1

Tab1 中拖入饼图，绑定饼图数据，如下图所示：

Snag_f1c930a.png

2.3 设置图表刷新

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

Snag_f1ef65e.png

JavaScript 代码如下：

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("chartID")，表示获取到指定的图表控件。

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

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

Snag_f20e916.png

JavaScript 代码如下：

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

2.3 效果预览

2.3.1 PC 端

保存模板，点击表单预览，效果如下图所示：

222

2.3.2 移动端

由于移动端不支持组件的点击事件，故示例无法在移动端预览，但刷新接口是支持移动端的。

3. 示例二：普通报表图表刷新编辑

3.1 准备数据

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

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

Snag_ebeff2b.png

3.2 设计表格

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

Snag_ec61bf8.png

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

Snag_ed576b2.png

3.3 设计图表

3.3.1 单元格元素图表

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

Snag_edd12a2.png

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

Snag_eddf84e.png

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

Snag_ee03d7c.png

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

Snag_ee262cd.png

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

Snag_ee43163.png

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

Snag_eddf84e.png

3.3.2 悬浮元素图表

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

Snag_ee65879.png

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

Snag_ee83d08.png

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

Snag_ee98dd2.png

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

Snag_eeb8a5e.png

3.4 设置图表刷新

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

Snag_eede0a2.png

3.5 效果预览

3.5.1 PC 端

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

222

3.5.2 移动端

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

4. 模板下载编辑

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