1.1 应用场景

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

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

1）手势缩放：鼠标选中区域即可放大该区域。

2）控件缩放：底部控件滚动选择区域，底部控件伸缩放大缩小区域。

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

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

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

1.2 功能介绍

1.2.1 手势缩放

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

注：选中小区域时，可以放大该区域；选中区域尽量往外拖，使其尽可能包含 X 轴的值，则原先页面会缩小，点击预览页面右上角刷新按钮，可恢复原样。

1.2.2 控件缩放

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

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

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

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

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

2.1 插入图表

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

2.2 数据设置

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

2.3 绑定数据

选中柱形图，绑定图表数据，如下图所示：

2.4 手势缩放

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

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

2.5 控件缩放

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

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

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

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

2.5 效果预览

1）PC 端

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

2）移动端

均支持移动端预览，效果如下图所示：

注1：此处为手机横屏效果。

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

已完成模板参见：%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）打开设计器内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\Chart\ColumnChart\多分类坐标轴柱形图.cpt，该模板有 3 个分类，如下图所示：

2）图表属性面板点击特效>交互属性，开启缩放控件，初始左边界填入文本：["华东","孙阳","点心"]，如下图所示：

注1：边界值根据分类值进行填写。该模板分类有三层：地区-姓名-产品，所以填写：["华东","孙阳","点心"]。

注2：边界值设置规则：["父分类","子分类"]，不是公式=["父分类","子分类"]，没有=号的。

3）多分类图表开启控件缩放后预览效果如下图所示：