反馈已提交

网络繁忙

下拉框实现直接联动图表

  • 文档创建者:yets11
  • 编辑次数:15次
  • 最近更新:Alicehyy 于 2022-06-17
  • 1. 概述

    1.1 预期效果

    在普通报表中,使用参数面板控件查询数据,可以很方便的实现图表根据参数联动的效果。但是用户希望可以选择数据后,不用点击查询,图表就可以直接联动出对应数据。

    例如:下拉框选择不同的销售员后,图表自动联动出该销售员的数据折线图。效果如下图所示:

    2246AADC-DADF-4F06-A725-6215B5B6B8FD.GIF

    1.2 实现思路

    给控件添加「编辑后」事件,通过 this.getValue 获取控件 的值,再通过接口 FR.Chart.WebUtils.changeParameter() 改变图表参数并重新请求数据,实现图表在控件编辑后直接联动。

    注:决策报表中,控件在 body 中可直接实现自动查询效果,详情可参见文档 决策报表自动查询

    2. 示例

    2.1 准备数据

    1)点击设计器左上角「文件>新建普通报表」,选择模板主题为「清爽科技」。

    2)新建数据库查询 ds1,SQL 语句为:SELECT * FROM 销量 where 销售员='${销售员}' 。并且设置参数默认值为「孙林」。如下图所示:

    Snag_663ba95.png

    2.2 设计图表

    2.2.1 插入图表

    选中一片单元格区域,点击工具栏「合并单元格」按钮,再点击「插入图表」按钮,插入「折线图」。如下图所示:

    Snag_6660bf7.png

    2.2.2 绑定数据

    选中图表,点击右侧属性面板「单元格元素>数据」,绑定数据如下图所示:

    Snag_669f9e2.png

    此时我们保存模板,点击「分页预览」,其效果如下图所示,仅显示默认值「孙林」的产品销量。

    Snag_66b61b0.png

    2.3 设置参数面板

    2.3.1 生成参数

    1)点击表格上方的 Snag_670eeb5.png 按钮,进入参数面板编辑界面,点击右上角「全部添加」将「销售员」参数添加到参数面板。

    2)取消勾选「点击查询前不显示报表内容」,否则不点击查询时,不会显示图表。

    Snag_672dba1.png

    2.3.2 设置下拉框控件

    参数控件选择「下拉框控件」,绑定数据字典为「销量」表中的「销售员」字段。如下图所示:

    Snag_67a31ec.png

    此时再次保存预览报表,其效果如下图所示,选择销售员后,需点击「查询」按钮,图表才会变化。

    9F40B3E5-011E-4E9C-9667-CCBEB2DB2C54.GIF

    2.4 设置编辑后事件

    选中下拉框控件,在右侧属性面板中点击「事件」,添加「编辑后」事件,输入 JavaScript 代码:

    FR.Chart.WebUtils.changeParameter({
    chartID:'A1',//图表所在单元格
    para:{ 
    销售员:this.getValue()
          }
    })

    步骤如下图所示:

    Snag_6841684.png

    最后删除查询按钮。

    2.5 效果预览

    保存报表,点击「分页预览」,效果如 1.1 节预期效果所示。

    注:不支持移动端。

    3. 示例扩展

    3.1 单元格控件联动

    如果希望控件不添加在参数面板,直接添加在单元格,如下图所示:

    Snag_68c1d53.png

    控件的数据字典、事件设置方法与参数面板中控件的设置方法完全一致,只需要注意 chartID 需根据图表单元格修改即可。

    最后,在单元格中使用控件,需使用「填报预览」,效果如下图所示:

    CAF186D4-F763-4116-A9BF-F77808C4386C.GIF

    3.2 下拉复选框控件联动

    下拉复选框控件与下拉框控件设置数据字典、以及编辑后事件均相同,需要注意的两点是:

    1)数据库查询语句需修改为 SELECT * FROM 销量 where 销售员 in ('${销售员}') 。这样图表才能实现多选展示对应的数据。

    2)下拉复选框控件的返回值类型为「字符串」,分隔符为 ',' 。如下图所示:

    Snag_6b2b6fa.png

    预期效果如下图所示:

    BE1B0198-F802-4921-9839-FC0DAB6FFC88.GIF

    4. 模板下载

    已完成模板参见:

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\参数面板下拉框和图表联动.cpt

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\单元格下拉框和图表联动.cpt

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\下拉复选框和图表联动.cpt

    点击下载模板:

    参数面板下拉框和图表联动.cpt

    单元格下拉框和图表联动.cpt

    下拉复选框和图表联动.cpt

    附件列表


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

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

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

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

    不再提示

    10s后关闭