[新]图表刷新接口

编辑
  • 文档创建者:jiangsr
  • 浏览次数:6208次
  • 编辑次数:12次
  • 最近更新:Carly 于 2019-10-14
  • 1. 版本

      设计器版本  图表(新特性)插件
      8.0  V8.6.6及以上
      9.0、10.0  -

    2. 概述

    2.1 功能描述

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

    1)示例一:决策报表

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

    222

    2)示例二:普通报表

    222

    2.2 实现方法

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

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

    3. 示例一:决策报表

    3.1 模板制作

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

    222

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

    222

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

    222

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

    222

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

    3.3 保存预览

    保存模板,点击预览,如下图所示:

    222

    4. 示例二:普通报表

    4.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");//获取到 A 6单元格图表 
    chartWrapper1.dataRefresh([1,2]);//刷新第 2、3 个图表

    4.3 保存预览

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

    222

    5. 已完成模板

    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

    附件列表


    主题: 图表应用
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]