反馈已提交

网络繁忙

扩展图表组件刷新

  • 文档创建者:Leo.Tsai
  • 历史版本:6
  • 最近更新:Alicehyy 于 2024-06-11
  • 1. 概述

    1.1 应用场景

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

    1.2 实现思路

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

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

    2. 示例

    2.1 数据准备

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

    Snag_ffe9169.png

    2.2 添加组件

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

    2024-06-11_9-28-27.png

    2.3 设置报表块

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

    Snag_102a3ea0.png

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

    2024-06-11_9-28-27.png

    2.4 图表绑定数据

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

    D1.png

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

    播放维度:=report0~B2

    指标值:=report0~C2

    目标值:=report0~D2

    Snag_102e20c4.png

    2.5 设置超级链接

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

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

    1718076198108536.png

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

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

    1718076573434484.png


    2.6 效果预览

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

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


    注:不支持移动端预览。

    3. 模板下载

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

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

    附件列表


    主题: 图表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭



    AI

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持