图表缩放

  • 文档创建者:文档助手1
  • 编辑次数:34次
  • 最近更新:Leo.Tsai 于 2020-06-24
  • 1. 概述

    1.1 应用场景

    在一些商业报表中,往往由于要展示的产品分类较多,数据都显示一张图表中表显得很拥挤,既不美观,也不利于比较数据,因此图表的缩放功能必不可少。

    FineReport 图表交互属性 提供了缩放功能,分为手势缩放控件缩放。效果如下所示:

    • 手势缩放:鼠标选中区域即可放大该区域。

    222

    • 控件缩放:底部控件滚动选择区域,底部控件伸缩放大缩小区域。

    222

    注1:支持图和表一起缩放。

    注2:两种缩放方式只能选其一,无法共存。

    注3:当设置缩放控件后,除了拖动缩放控件外,在绘图区内拖动也将触发缩放控件的滑动。绘图区内拖动方向与控件相反,如向左滑动则控件则对应的图表区域向右滑动。

    1.2 功能介绍

    1.2.1 手势缩放

    图表属性面板特效>交互属性>图表缩放缩放控件默认为关闭状态,此时可使用手势缩放。

    Snag_22c3dd3c.png

    注:选中小区域时,可以放大该区域;选中区域尽量往外拖,使其尽可能包含 X 轴的值,则原先页面会缩小。

    1.2.2 控件缩放

    当缩放控件开启时,即可使用缩放控件。

    控件边界:可调整时,可伸缩控件长短,不可调整时则按初始值为准。

    初始边界:调整左右边界。

    缩放方向:可调整为缩放方向。

    注:当柱形图分类为对象名称时,左右边界也可以填数字来限定控件初始大小。

    Snag_232bdad1.png

    2. 示例

    2.1 插入图表

    新建普通报表,合并一片区域单元格,点击插入图表快捷按钮,插入柱形图,如下图所示:

    1591841080488370.png

    2.2 数据设置

    新建数据集 ds1,SQL 语句为:SELECT * from S订单 order by 订购日期 limit 25

    Snag_16e7e4.png

    2.3 绑定数据

    选中柱形图,绑定图表数据,如下图所示:

    image.png

    2.4 手势缩放

    选中 A1 单元格,右边属性面板选择单元格元素>特效>交互属性>图表缩放关闭缩放控件按钮。

    Snag_20861c.png

    注:缩放控件为关闭状态时,即为手势缩放。开启状态时为控件缩放,两者不并存。

    2.5 控件缩放

    选中 A1 单元格,右边属性面板选择单元格元素>特效>交互属性>图表缩放开启缩放控件按钮。

    示例设置左边界值为:'2010-01-01' ,右边界为:'2010-02-02',即初始图表只显示一个月的数据,如果想看其他月的数据,可以伸缩控件长短。

    Snag_25a861.png

    注1:缩放控件为关闭状态时,即为手势缩放。开启状态时为控件缩放,两者不并存。

    注2:如果 X 轴是分类坐标轴,那么边界必须是已有的分类,如果 X 轴是数值/日期坐标轴,那么边界就可以是一段范围而不一定是已有的分类。

    2.5 效果预览

    1)PC 端

    保存报表,点击表单预览,效果如应用场景中所示。

    2)移动端

    均支持移动端预览,以缩放控件缩放图为例,效果图如下所示:

    2044CC8D-324F-413E-A6A1-9C7FDC4C5216.GIF

    注:柱形图表缩放支持决策报表,设置方式同普通报表设置。

    3. 模板下载

    已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\手势缩放柱形图.cpt

    点击下载手势缩放柱形图模板:手势缩放柱形图.cpt

    已完成模板参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\控件缩放柱形图.cpt

    点击下载控件缩放柱形图模板:控件缩放柱形图.cpt

    附件列表


    主题: 图表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!