反馈已提交

网络繁忙

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

决策报表组件重叠

  • 文档创建者:Holly
  • 历史版本:26
  • 最近更新:Alicehyy 于 2022-08-22
  • 1. 概述

    制作决策报表时,为了布局规范,设计者常常使用样式相同的图表或报表块。FineReport 提供决策报表内组件复制粘贴,并且在「绝对布局」下,支持组件重叠放置。

    1.1 预期效果

    示例将实现,中国地图上,三个不同省份的销量以柱状图展示、柱状图时间为一周,坐标为星期。如下图所示:

    image.png

    1.2 实现思路

    以地图为底层图层,将柱形图叠放于上,直观地展示区域数据。

    2. 示例

    2.1 新建模板

    点击「文件>新建决策报表」,选择「body>属性」,将布局方式修改为「绝对布局>固定大小」,这样组件的位置则不会有大的变动。

    如下图所示:

    1570674167393615.png

    2.2 准备数据

    新增内置数据集,为地图和柱状图准备数据。如下图所示:

    image.png

    2020-10-25_16-56-13.png

    2.3 添加地图

    1)在图表中,选中「地图」,拖入决策报表 body 中,如下图所示:

    1570674594712532.png

    2)地图数据和样式设置可参考 区域地图 中设置修改即可,最终样式如下图所示:

    image.png

    2.4 添加柱形图

    1)在图表中,选中柱形图,拖入决策报表 body 中,调整大小,叠放于地图上西藏自治区,如下图所示:

    1570674817450326.png

    2)设置柱形图圆角属性和柱子宽度,设置可参考 圆角属性和柱子宽度自定义,最终样式如下图所示:

    image.png

    3)选中柱形图,复制粘贴两次,柱形图组件重叠错开放置。如下图所示:

    注:为避免组件重叠覆盖,请先选中处于上层的组件,再进行粘贴 

    image.png

    4)粘贴完成后,修改其数据、大小和位置,效果如下图所示:

    image.png

    2.5 效果预览

    2.5.1 PC 端

    保存模板,点击「PC端预览」,效果如下图所示:

    image.png

    2.5.2 移动端

    移动端默认勾选了「手机重布局」,则会根据模板组件顺序依次展示。如下图所示:

    Snag_2295a12c.png

    若取消勾选「手机重布局」,如下图所示:

    Snag_2295b58f.png

    则预览效果如下图:

    Snag_2295a8ae.png

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webroot\WEB-INF\reportlets\doc\frm\决策报表组件重叠.frm

    点击下载模板:决策报表组件重叠.frm

    附件列表


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

    售前咨询电话

    400-811-8890转1

    在线技术支持

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

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

    总裁办24H投诉

    热线电话:173-1278-1526