扩展图表组件刷新

  • 文档创建者:Leo.Tsai
  • 编辑次数:1次
  • 最近更新:Leo.Tsai 于 2019-11-29
  • 1. 概述

    1.1 问题描述

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

    1.2 实现思路

    JS 实现图表组件刷新时,普通图表采用的是dataRefresh()这个接口,但是扩展图表不支持dataRefresh(),扩展图表可以用dealReloadChartAjax()这个接口实现单个组件刷新。

    2. 示例

    2.1 数据准备

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

    Snag_ffe9169.png

    2.2 报表设计

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

    Snag_10017816.png

    2)饼图chart0属性设置

    点击饼图的编辑按钮,在右下方属性面板,如下图绑定内置数据集数据。

    Snag_10093ea0.png

    点击特效>交互属性,添加一个当前表单对象的超级链接,点击编辑按钮。

    Snag_100fc16f.png

    表单对象下拉选择报表块report0,添加一个area参数,其值插入公式SERIES,以便后面的步骤实现点击饼图可以联动报表块,改变报表块的数据。

    Snag_101293f8.png

    点击特效>交互属性,添加一个JavaScript的超级链接,重命名为监控刷新,点击编辑按钮。

    Snag_10259989.png

    插入如下 JS 代码:

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

    Snag_1027d986.png

    3)报表块report0设计

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

    Snag_102a3ea0.png

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

    Snag_102c7362.png

    4)扩展图表-轮播夜光仪表盘chart1属性设置

    仪表盘绑定报表块中的单元格数据,插入公式如下:

    播放维度:report0~B2

    指标值:report0~C2

    目标值:report0~D2

    Snag_102e20c4.png

    2.3 效果预览

    报表决策报表,点击表单预览,组件刷新效果如下图所示:

    1FE44351-BC49-41C6-9880-182438D2F23B.GIF


    注:不支持移动端预览。

    3. 模板下载

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

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

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览