反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

图表联动

  • 文档创建者:Leo.Tsai
  • 历史版本:9
  • 最近更新:Leo.Tsai 于 2021-12-22
  • 1. 概述

    1.1 应用场景

    在决策报表中使用图表时,常常希望有一些交互效果,例如点击报表块单元格中不同的数据,图表能根据对应的数据展示图形。

    或者点击一个图表的分类或系列,另一个图表或表格能联动显示对应分类或系列的数据。效果如下:

    1.2 功能入口

    如果是图表块,添加超链的方法:「特效>交互属性>超级链接>超级链接-当前表单对象」,配置页面如下图所示:

    支持超链时传递参数,详细介绍参见文档:超级链接传参

    Snag_338a607f.png

    注:报表块单元格里的超链名字跟图表不一样,叫做「当前决策报表对象」,但配置页面是相同的,这点需要注意下。

    2. 示例

    本文以决策报表作为示例,普通报表实现方法与原理类似。第 3 章模板下载提供普通报表模板,可自行下载查看。

    2.1 准备数据

    新建决策报表,新建三个数据集,SQL 查询语句分别为:

    ds1:SELECT * FROM 销量

    ds2:SELECT * FROM 销量 WHERE 地区='${area}'

    ds3:SELECT * FROM 销量 WHERE 销售员='${spe}'

    ds2 数据集中定义了参数 area,表示「地区」,设置其默认值为「华东」。如下图所示: 

    Snag_6a80501.png

    ds3 数据集中定义了参数 spe,表示「销售员」,设置其默认值为「孙林」。如下图所示: 

    Snag_eae6402.png

    2.2 设计报表

    最终决策报表 body 的效果如下图所示:

    注:决策报表 body 的布局方式为「绝对布局」。

    Snag_eb2fe89.png

    2.2.1 设计饼图

    向 body 中拖入一个饼图,绑定数据集 ds1 的数据,分类为「无」,系列为「地区」,值为「销量>求和」。如下图所示:

    Snag_eb62dc8.png

    设置饼图标题为「地区销量对比」,样式可自行修改,本文模板中修改了字符。如下图所示:

    Snag_ebaa1bd.png

    2.2.2 设计表格 A

    向 body 中拖入一个报表块,进入编辑界面后,将 ds1 数据集的 地区、销售员、销量 字段拖入 A2~C2 单元格中,设置 C2 单元格的数据设置为「汇总>求和」,表格样式如下图所示:

    Snag_ec0a087.png

    2.2.3 设计柱形图

    向 body 中拖入一个柱形图,绑定数据集 ds2 的数据,分类为「销售员」,系列名使用「字段名」选择「销量」,汇总方式为「求和」。如下图所示:

    Snag_ec46129.png

    设置柱形图的标题为公式=$area+"销售员销量分析",修改字符样式。如下图所示:

    Snag_ec62147.png

    2.2.4 设计表格 B

    1)向 body 中拖入一个报表块,进入编辑界面后,合并 A1~C1 单元格,将 ds3 数据集的 销售员 字段拖入 A1 单元格,将 产品、产品类型、销量 字段拖入 A2~C2 单元格,设置 C2 单元格的数据设置为「汇总>求和」。

    2)设置 A2 单元格的左父格为 A1 单元格。如下图所示:

    1625194378274670.png

    3)设置 A1 单元格的显示值为 =$$$+"各产品销量"。如下图所示:

    Snag_ecf994a.png

    2.2.5 设置组件标题

    上述设计的图表和报表块均为决策报表的组件,我们给每个组件均设置了标题。选中组件,在「属性>样式」中设置即可。

    以饼图为例:选中饼图 chart0,点击「属性>样式」,弹出样式设置对话框。框架样式选择「自定义」时,可设置标题。具体设置如下图所示:

    Snag_ed5ff89.png

    2.3 添加超链

    2.3.1 饼图添加超链

    我们要实现的效果是:点击饼图的系列即地区,柱形图就显示为点击的地区下所有销售员的销量。

    编辑饼图,点击右侧属性面板的「特效」,在「交互属性>超级链接」处添加一个「当前表单对象」,选择柱形图对象即 chart1,并添加参数 area,参数值选择「系列名称」。即将饼图的系列名作为 area 参数传递给柱形图。

    步骤如下图所示:

    Snag_ee14c8a.png

    2.3.2 表格 A 添加超链

    我们要实现的效果是:点击单元格中的地区,柱形图就显示为点击的地区下所有销售员的销量。

    选中 A2 单元格,点击右侧属性面板的「超级链接」,添加一个「当前决策报表对象」(同当前表单对象),选择柱形图对象即 chart1,并添加参数 area,参数值为公式 =A2。即将 A2 单元格的值作为 area 参数传递给柱形图。

    步骤如下图所示:

    Snag_ee77f74.png

    2.3.3 柱形图添加超链

    我们要实现的效果是:点击柱形图的柱子,表格 B 就根据柱子的分类即销售员展示对应的各产品销量。

    注:在普通报表中,无法直接在一张模板中实现图表联动单元格或单元格联动单元格,需借助网页框控件,详情可参考文档 数据钻取到当前模板 。

    编辑柱形图,点击右侧属性面板的「特效」,在「交互属性>超级链接」处添加一个「当前表单对象」,选择表格 B 所在的报表块即 report1,并添加参数 spe,参数值选择「分类名」。即将柱形图的分类名作为 spe 参数传递给表格 B。

    步骤如下图所示:

    Snag_eeddb72.png

    2.4 效果预览

    2.4.1 PC 端

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

    2.4.2 移动端

    App 端和 HTML5 端均支持,效果如下图所示:

    04268FA6-9054-447F-85F8-88BFB7972657.GIF

    3. 模板下载

    已完成模板可参见:

    %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\图表联动表单对象.frm

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

    点击下载模板:

    图表联动表单对象.frm

    图表联动单元格.cpt

    附件列表


    主题: 图表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

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

    总裁办24H投诉

    热线电话:173-1278-1526