图表缩放

1.1 版本

1.2 应用场景

一些商业报表中，由于要展示的产品分类较多，数据都显示一张图表中，显得很拥挤，既不美观，也不利于比较数据。

希望可以通过手势缩放图表。如下图所示：

希望可以通过缩放轴平移查看或缩放图表。如下图所示：

希望可以通过滚动轴滚动平移查看图表。如下图所示：

1.3 功能入口

图表的「特效>交互属性」中，可设置图表缩放。

注1：若开启坐标轴翻转，则不支持勾选「开启缩放控件」。

注2：使用 FVS 可视化看板在移动端预览时，直接使用图表组件，图表缩放不生效；可在表格组件中插入图表使用，此时图表缩放生效。

1）未勾选「开启缩放控件」时为手势缩放，此时可设置缩放方向。如下图所示：

2）勾选「开启缩放控件」后为控件缩放，此时可选择控件类型：

• 缩放轴：选择控件类型为缩放轴时，可设置控件边界是否可调整及初始左右边界。

• 滚动轴：选择控件类型为滚动轴时，可设置初始分类数（坐标轴为分类坐标轴）或缩放比例（坐标轴为时间/数值坐标轴）。

如下图所示：

注：词云图、框架图、力学气泡图只能设置手势缩放，且缩放方向只能设置为 XY轴 或无 。

1）默认未勾选「开启缩放控件」，此时缩放方式为手势缩放。

2）可设置缩放方向为：X轴、Y轴、XY轴、无：

• X轴：鼠标选择区域时，只能根据鼠标轨迹选中横向区域。

• Y轴：鼠标选择区域时，只能根据鼠标轨迹选中纵向区域。

• XY轴：缩放方向默认值。鼠标选择区域时，可根据鼠标轨迹选择任意区域。建议多数情况下设置缩放方向为 XY轴 。

• 无：不可缩放。

注：决策报表移动端开启重布局时，图表不支持控件缩放，可以将图表放在报表块中使用，此时支持控件缩放。

1）勾选「开启缩放控件」，此时缩放方式为控件缩放。

2）可设置控件类型：

• 缩放轴：选择控件类型为缩放轴时，可设置控件边界是否可调整及初始左右边界。

• 滚动轴：选择控件类型为滚动轴时，可设置初始分类数（坐标轴为分类坐标轴）或缩放比例（坐标轴为时间/数值坐标轴）。

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

拖动控件滑动如下图所示：

拖动绘图区滑动如下图所示：

3.1 缩放轴

选择控件类型为缩放轴时，可设置控件边界是否可调整及初始左右边界。

1）控件边界：控件边界决定控件是否可移动，是否可伸缩控件长短。

• 设置为可调整时，可移动控件，可伸缩控件长短。

• 设置为不可调整时，可移动控件，但不可伸缩控件长短，控件长短按设置的初始左右边界为准。

2）初始左右边界：初始左右边界决定图表初始展示的范围。

• 不设置初始左右边界，则展示所有数据。

• 设置初始左右边界，则初始只显示边界内的数据。

3.2 滚动轴

选择控件类型为滚动轴时，可设置初始分类数（坐标轴为分类坐标轴）或缩放比例（坐标轴为时间/数值坐标轴）。

• 当图表的坐标轴为分类坐标轴时，可设置初始分类数，默认为 8 ，即图表初始仅展示前 8 个分类的数据。

• 当图表的坐标轴为时间/数值坐标轴时，可设置缩放比例，默认为 30% 。

4.1 新建模板

新建一个普通报表，如下图所示：

4.2 准备数据

新建数据库查询 ds1。输入 SQL 查询语句：SELECT * from 销量。如下图所示：

4.3 插入图表

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

4.4 绑定数据

选中柱形图，绑定图表数据，数据来源为「数据集数据」，数据集为「ds1」，分类为「销售员」，系列名使用为「字段名」，字段名为「销量」，系列名为「销量」，汇总方式为「求和」，如下图所示：

4.5 取消标题可见

选中柱形图，点击右侧的「单元格元素>样式>标题」，取消勾选「标题可见」，如下图所示：

4.6 设置图表缩放

选中柱形图，设置图表缩放，保持默认的取消勾选「开启缩放控件」，缩放方向保持默认的「XY 轴」，如下图所示：

4.7 效果预览

1）PC 端

保存报表，点击「分页预览」即可预览模板，支持放大、缩小和复原，如下图所示：

• 放大：在图表区用鼠标选中区域即可放大该区域。放大后，选中的区域横向扩展至整个绘图区， Y轴 标签根据当前范围内的值重新计算。

• 缩小：从 X轴 某一边界开始向另一边界外拖，使其尽可能包含 X轴 的值，则原先页面会缩小。

• 复原：点击刷新按钮即可复原。

2）移动端

同时支持 App 端和 H5 端预览，在绘图区域长按后，可拖拽矩形框，仅支持放大和复原，效果如下图所示：

注1：移动端预览普通图表、决策报表中的报表块图表、决策报表中的保留布局图表块时，需要在绘图区域长按后，方可拖拽矩形框，且仅支持放大和复原。

注2：移动端预览决策报表中的重布局图表块时，双指在绘图区域进行缩放，同时支持放大、缩小和复原。

5.1 新建模板

同 4.1 节，此处不再赘述。

5.2 准备数据

同 4.2 节，此处不再赘述。

5.3 插入图表

同 4.3 节，此处不再赘述。

5.4 绑定数据

同 4.4 节，此处不再赘述。

5.5 取消标题可见

同 4.5 节，此处不再赘述。

5.6 设置图表缩放

选中柱形图，设置图表缩放，勾选「开启缩放控件」，控件类型选择「缩放轴」，控件边界选择「可调整」，初始左边界设置为公式："孙林"，初始右边界设置为公式："张颖"，如下图所示：

注1：此示例是单分类柱形图，故写法是公式，会有个等于号，多分类图表示例详情参见示例四。

注2：设置初始左右边界为分类名时，左右边界的内容一定要跟「分类名」在数据集中的字符串内容的写法保持一致，否则不生效。

5.7 效果预览

1）PC 端

保存报表，点击「分页预览」，初始展示时缩放轴长短为设置的初始左右边界，可移动、伸缩缩放轴，效果如下图所示：

• 移动缩放轴：选中移动缩放轴，即可平移图表。
  

• 缩小缩放轴：选中缩小缩放轴，即可放大图表。

• 伸长缩放轴：选中伸长缩放轴，即可缩小图表。

2）移动端

同时支持 App 端和 H5 端预览，初始展示时缩放轴长短为设置的初始左右边界，可移动、伸缩缩放轴，效果如下图所示：

• 移动缩放轴：选中移动缩放轴，即可平移图表。
  

• 缩小缩放轴：选中缩小缩放轴，即可放大图表。

• 伸长缩放轴：选中伸长缩放轴，即可缩小图表。

6.1 准备模板

同 4.1 节，此处不再赘述。

6.2 准备数据

同 4.2 节，此处不再赘述。

6.3 插入图表

同 4.3 节，此处不再赘述。

6.4 绑定数据

同 4.4 节，此处不再赘述。

6.5 取消标题可见

同 4.5 节，此处不再赘述。

6.6 设置控件缩放

选中柱形图，设置图表缩放，勾选「开启缩放控件」，控件类型选择「缩放轴」，控件边界选择「不可调整」，初始右边界设置为公式：ds1.value(round(count(ds1.select("销售员"))/2,0),2)，即展示前 50% 的数据，如下图所示：

注：此示例是单分类柱形图，故写法是公式，会有个等于号，多分类图表示例详情参见示例四。

6.7 效果预览

1）PC 端

保存报表，点击「分页预览」，可移动缩放轴平移展示柱形图，但不可伸缩缩放轴长短，缩放轴长短按设置的初始左右边界为准，效果如下图所示：

2）移动端

同时支持 App 端和 HTML5 端，可移动缩放轴平移展示柱形图，但不可伸缩缩放轴长短，缩放轴长短按设置的初始左右边界为准，效果如下图所示：

7.1 新建模板

同 4.1 节，此处不再赘述。

7.2 准备数据

同 4.2 节，此处不再赘述。

7.3 插入图表

同 4.3 节，此处不再赘述。

7.4 绑定数据

选中柱形图，绑定图表数据，数据来源为「数据集数据」，数据集为「ds1」，分类为「产品类型、销售员、地区」，系列名使用为「字段名」，字段名为「销量」，系列名为「销量」，汇总方式为「求和」，如下图所示：

7.5 取消标题可见

同 4.5 节，此处不再赘述。

7.6 设置图表缩放

选中柱形图，设置图表缩放，勾选「开启缩放控件」，控件类型选择「缩放轴」，控件边界选择「可调整」，初始左边界设置为：["华东","张珊","饮料"]，初始右边界设置为：["华北","韩文","点心"]，如下图所示：

注1：此示例为多分类图表，与单分类图表的初始左右边界写法不同，不用公式，直接在编辑框中输入，或者在公式定义中输入后删除最前面的等于号 。

注2：多分类边界值设置规则：["父分类","子分类"]，且边界值根据分类值进行填写。例如该模板分类有三层：地区-销售员-产品类型，所以按顺序填写：["华东","张珊","饮料"]。

7.3 效果预览

1）PC 端

保存报表，点击「分页预览」，初始展示时缩放轴长短为设置的初始左右边界，可移动、伸缩缩放轴，效果如下图所示：

• 移动缩放轴：选中移动缩放轴，即可平移图表。
  

• 缩小缩放轴：选中缩小缩放轴，即可放大图表。

• 伸长缩放轴：选中伸长缩放轴，即可缩小图表。

2）移动端

同时支持 App 端和 H5 端预览，初始展示时缩放轴长短为设置的初始左右边界，可移动、伸缩缩放轴，效果如下图所示：

• 移动缩放轴：选中移动缩放轴，即可平移图表。
  

• 缩小缩放轴：选中缩小缩放轴，即可放大图表。

• 伸长缩放轴：选中伸长缩放轴，即可缩小图表。

8.1 新建模板

同 4.1 节，此处不再赘述。

8.2 准备数据

新建数据库查询 ds1。输入 SQL 查询语句：SELECT * from 总公司月份。如下图所示：

8.3 插入图表

同 4.3 节，此处不再赘述。

8.4 绑定数据

选中柱形图，绑定图表数据，数据来源为「数据集数据」，数据集为「ds1」，分类为「月份」，系列名使用为「字段名」，字段名为「销售额」，系列名为「销售额」，汇总方式为「求和」，如下图所示：

8.5 取消标题可见

同 4.5 节，此处不再赘述。

8.6 设置图表缩放

选中柱形图，设置图表缩放，勾选「开启缩放控件」，控件类型选择「滚动轴」，初始分类数设置为「5」，如下图所示：

8.7 效果预览

1）PC 端

保存报表，点击「分页预览」，初始只展示前 5 个分类，拖拽滚动轴可平移展示图表，效果如下图所示：

2）移动端

同时支持 App 端和 H5 端预览，初始只展示前 5 个分类，拖拽滚动轴可平移展示图表，效果如下图所示：

9.1 新建模板

同 4.1 节，此处不再赘述。

9.2 准备数据

同 8.2 节，此处不再赘述。

9.3 插入图表

同 4.3 节，此处不再赘述。

9.4 绑定数据

同 8.4 节，此处不再赘述。

9.5 取消标题可见

同 4.5 节，此处不再赘述。

9.6 设置数值分类轴

选中柱形图，点击右侧的「单元格元素>样式>坐标轴 >X轴」，类型选择「数值坐标轴」，如下图所示：

9.7 设置图表缩放

选中柱形图，设置图表缩放，勾选「开启缩放控件」，控件类型选择「滚动轴」，缩放比例设置为 60% ，如下图所示：

9.8 效果预览

1）PC端

保存报表，点击「分页预览」，缩放比例为 60% ，拖拽滚动轴可平移展示图表，效果如下图所示：

2）移动端

同时支持 App 端和 H5 端预览，缩放比例为 60% ，拖拽滚动轴可平移展示图表，效果如下图所示：

点击下载示例一已完成模板：单分类柱形图手势缩放.cpt

点击下载示例二已完成模板：单分类柱形图控件缩放缩放轴可调整设置初始左右边界为分类名.cpt

点击下载示例三已完成模板：单分类柱形图控件缩放缩放轴不可调整设置初始右边界为公式.cpt

点击下载示例四已完成模板：多分类柱形图控件缩放缩放轴可调整设置初始左右边界.cpt

点击下载示例五已完成模板：单分类柱形图控件缩放滚动轴设置初始分类数.cpt

点击下载示例六已完成模板：单分类柱形图控件缩放滚动轴设置缩放比例.cpt