历史版本41 :图表缩放 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 应用场景

用户希望:

  • X 轴太密集时,可以设置滚动条。

  • 有的图表效果需要拖拉放大才可以正常展示,需要图表可以缩放。

  • 多系列多分类柱状图,系列、分类数量较多时,希望柱子间有一定距离,无重叠。

  • 图表分类太多,可以左右滑动显示。

  • 柱子特别多,显示效果不好,需要柱子间隔一致,生成横向滚动条滚动展示。

可参考本文方法实现。

1.2 功能简介

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

FineReport 图表交互属性 提供了缩放功能,分为手势缩放控件缩放

1)手势缩放

放大:鼠标选中区域即可放大该区域。

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

复原:点击预览页面右上角刷新按钮,可恢复原样。

1621478986988321.gif

2)控件缩放

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

1621479022432764.gif

2. 设置方法编辑

注1:两种缩放方式同时支持普通报表和决策报表,支持移动端预览。

注2:两种缩放方式只能选其一,无法同时支持。

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

2.1 手势缩放

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

27.png

2.2 控件缩放

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

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

初始边界:设置图表初始的左右边界。

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

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

注2:单分类图表和多分类图表的边界写法不同,本文的示例二和示例三将详细介绍。

29.png

3. 示例一:手势缩放编辑

3.1 插入图表

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

1591841080488370.png

3.2 数据设置

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

1591840939616178.png

3.3 绑定数据

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

1618369766718896.png

3.4 设置手势缩放

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

Snag_20861c.png

注:缩放控件为关闭状态时,即为手势缩放。开启状态时为控件缩放,两者不能同时支持,只能二选一。

3.5 效果预览

3.5.1 PC 端

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

3.5.2 移动端

同时支持 App 端和 H5 端预览,效果如下图所示:

1605600290743403.gif

4. 示例二:控件缩放编辑

4.1 插入图表

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

1615534266225833.png

4.2 数据设置

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

1615534290622819.png

4.3 绑定数据

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

1618369804868900.png

4.4 设置控件缩放

选中 A1 单元格,图表属性面板选择特效>交互属性>图表缩放,开启缩放控件按钮,设置初始左右边界(非必填项),如下图所示:

初始左边界:="2010-02-02 00:00:00"

初始右边界:="2010-06-10 00:00:00"

注:这个例子是个单分类柱形图,所以写法是用公式,所以会有个等于号。

Snag_b8c9204.png

左右边界的内容一定要跟「分类名」在数据集中的字符串内容的写法保持一致,否则不生效。例如本例分类名为「订购日期」,如下图所示:

Snag_b92ff96.png

4.5 效果预览

4.5.1 PC 端

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

4.5.2 移动端

同时支持 App 端和 H5 端预览,效果如下图所示:

1605600641495773.gif

5. 示例三:多分类图表控件缩放编辑

图表有多个分类时,设置控件缩放的左右边界写法跟单分类是不同的,下面介绍下如何设置多分类图表的控件缩放。

5.1 准备模板

打开设计器内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\多分类坐标轴柱形图.cpt,该模板有 3 个分类,如下图所示:

Snag_b993251.png

5.2 设置控件缩放

选中图表,属性面板选择特效>交互属性>图表缩放,开启缩放控件按钮,设置初始左边界(非必填项),如下图所示:

左边界的写法为:["华东","孙阳","点心"]

注1:此处跟单分类图表写法不一样,不要在编辑框开头加等于号,此处不用公式。

注2:边界值设置规则:["父分类","子分类"],且边界值根据分类值进行填写,该模板分类有三层:地区-姓名-产品,所以按顺序填写:["华东","孙阳","点心"]

Snag_b9b7675.png

5.3 效果预览

多分类图表的效果如下图所示,可以看到预览时,图表最左边是从华东-孙阳-点心开始的。

Snag_ba162f0.png

6. 模板下载编辑

1)手势缩放

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

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

2)控件缩放

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

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

3)多分类图表缩放

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

点击下载模板:多分类图表控件缩放.cpt