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

目录:

1. 概述编辑

1.1 版本

报表服务器版本
功能变动
10.0图表缩放控件新增滚动轴设置项,原缩放轴显示效果优化。详情请参见第 2.2 节

1.2 应用场景

在一些商业报表中,往往由于要展示的产品分类较多,数据都显示一张图表中表显得很拥挤,既不美观,也不利于比较数据,往往会产生一些需求:

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

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

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

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

那么可设置图表缩放就必不可少了。接下来本文将详细介绍图表缩放的设置方式与效果。

2. 功能介绍编辑

注:不勾选「开启缩放控件」时为手势缩放,勾选后为控件缩放,两者不能同时支持。

2.1 手势缩放

1)缩放轴功能显示:点击图表属性面板「特效> 交互属性 >图表缩放」,默认未勾选「开启缩放控件」,此时可使用手势缩放。

可设置缩放方向为:X 轴、Y 轴、XY 轴、无。默认为 XY 轴。选择「无」时,即不可缩放。建议多数情况下选择XY轴。

注:仅手势缩放可设置缩放方向。

Snag_cb61fa.png

2)缩放效果

放大:在图表区用鼠标选中区域即可放大该区域,可同时选中多个区域。

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

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

注:移动端预览时,需长按屏幕后才能拖动区域。

3)展开工具栏

全屏显示:点击可直接放大至全屏。

导出:可直接生成png格式的图片,未设置背景时,导出的图片背景为空白。

排序:可将数据大小从高到低或低到高进行排序,点击刷新可复原。

1621478986988321.gif

2.2 控件缩放

当勾选「开启缩放控件」后,即可设置缩放控件。控件缩放包含两种控件类型:缩放轴和滚动轴。

注:10.0.18 版本之前的设计器中,只有缩放轴。

Snag_f13a07.png

2.2.1 缩放轴

1)功能设置

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

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

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

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

2)缩放效果

移动缩放轴选择显示的区域,鼠标点绘图区并移动也可以移动区域,拉伸缩放轴边界放大缩小区域。

CA03CB7B-94F8-43B4-8432-14006BB72E0A.GIF

2.2.2 滚动轴

1)功能设置

  • 当图表的坐标轴为「分类坐标轴」时,可设置初始分类数,默认为 8 个分类。

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

Snag_1177002.png

2)缩放效果

移动滚动轴选择显示的区域,且不能进行缩放。

B5D915F3-300B-4AFB-906C-3FA27EDDA673.GIF

注:当设置缩放控件后,除了拖动缩放控件外,在绘图区内拖动也将触发缩放控件的滑动。

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 单元格,右边属性面板选择「单元格元素>特效>交互属性>图表缩放」,取消勾选「开启缩放控件」,缩放方向选择「XY 轴」。

Snag_11e3672.png

3.5 效果预览

3.5.1 PC 端

保存报表,点击「分页预览」,效果如 2.1 节缩放效果所示。

3.5.2 移动端

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

注:移动端预览时,需长按屏幕后才能拖动区域。

1605600290743403.gif

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

这里在示例一模板的基础上做修改即可。

4.1 设置控件缩放

在图表属性面板选择「特效>交互属性>图表缩放」,勾选「开启缩放控件」,控件类型选择「缩放轴」,控件边界选择「可调整」,设置初始左右边界(非必填项),初始左边界:="2010-02-02 00:00:00" ,初始右边界:="2010-06-10 00:00:00"

如下图所示:

Snag_1266710.png

注:这个例子是个单分类柱形图,所以写法是用公式,所以会有个等于号。多分类图表示例请参见下方示例三。

4.2 注意事项

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

Snag_b92ff96.png

4.3 效果预览

4.3.1 PC 端

保存报表,点击「分页预览」,效果如 2.2.1 节缩放效果所示。

4.3.2 移动端

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

16428A07-87DD-4021-AF98-3DD871637607.GIF

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

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

5.1 准备模板

打开设计器内置模板:

多分类图表控件缩放.cpt,该模板有 3 个分类,如下图所示:

Snag_b993251.png

5.2 设置控件缩放

选中图表,属性面板选择「特效>交互属性>图表缩放」,勾选「开启缩放控件」,控件类型选择「缩放轴」,控件边界选择「可调整」,设置初始左边界(非必填项):["华东","孙阳","点心"],不设置初始右边界。如下图所示:

注1:此处跟单分类图表写法不一样,不用公式,直接在编辑框中输入,或者在公式定义中输入后删除最前面的 = 。

注2:多分类边界值设置规则:["父分类","子分类"],且边界值根据分类值进行填写。例如该模板分类有三层:地区-姓名-产品,所以按顺序填写:["华东","孙阳","点心"],且各分类用双引号“”括起来。

Snag_135e8da.png

5.3 效果预览

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

Snag_13abee3.png

6. 模板下载编辑

1)手势缩放

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

2)控件缩放

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

3)多分类图表缩放

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