[新]图表刷新接口

编辑
  • 文档创建者:jiangsr
  • 浏览次数:2735次
  • 编辑次数:10次
  • 最近更新:Kevin-s 于 2019-06-03
  • 1. 版本

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

    2. 描述

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

    1)示例一(frm)

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


    2)示例二(cpt)



    3. 实现方法

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

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


    4. 示例一(frm)

    4.1 制作模板

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


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


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


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



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

    4.3 保存预览

    保存模板,点击预览,即可看到如上图示例一所示。


    5. 示例二(cpt)

    5.1 制作模板

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


    2)在模板中插入图表和悬浮图表,并添加按钮控件,这里就不详细介绍了如下图:



    5.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 个图表

    5.3 保存预览

    保存模板,选择数据分析预览方式,即可看到如上图示例二所示。

    6. 已完成模板

    1)示例一

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

    右击存储模板

    2)示例二

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

    点击下载模板




    附件列表


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

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

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