反馈已提交
网络繁忙
在一些商业报表中,往往由于要展示的产品分类较多,数据都显示一张图表中表显得很拥挤,既不美观,也不利于比较数据,往往会产生一些需求:
X 轴太密集时,可以设置滚动条,可以左右滑动显示。
有的图表效果需要拖拉放大才可以正常展示,希望图表可以缩放。
那么可设置图表缩放就必不可少了。接下来本文将详细介绍图表缩放的设置方式与效果。
在图表「特效>交互属性」中,可设置「图表缩放」。未勾选「开启缩放控件」时为手势缩放,勾选后为控件缩放,控件缩放可选择控件类型为「缩放轴」或「滚动轴」。
如下图所示:
注:手势缩放和控件缩放两者不能同时支持。
点击图表属性面板「特效> 交互属性 >图表缩放」,默认未勾选「开启缩放控件」,此时图表缩放方式为「手势缩放」。
可设置缩放方向为:X轴、Y轴、XY轴、无。默认为 XY轴。
注:词云图、框架图、力学气泡图只能设置缩放方向为 XY轴。
X轴:若缩放方向设置为 X轴 ,鼠标选择区域时,只能根据鼠标轨迹选中「横向区域」。
Y轴:选定区域只能纵向选择。
XY轴:鼠标选中区域可以是任意区域。根据x,y轴是分类轴,时间轴或者值轴执行x,y单向缩放时同样的逻辑。
无:不可缩放。
打开内置模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\手势缩放柱形图.cpt 预览效果。
放大:在图表区用鼠标选中区域即可放大该区域。放大后,选中的区域横向扩展至整个绘图区, Y轴 标签根据当前范围内的值重新计算。
缩小:从 X轴 某一边界开始尽量另一边界外拖,使其尽可能包含 X轴 的值,则原先页面会缩小。
复原:点击预览页面右上角刷新按钮,可恢复原样。
注:移动端预览时,需长按屏幕后才能拖动区域。
当勾选「开启缩放控件」后,即可设置缩放控件。控件缩放包含两种控件类型:缩放轴和滚动轴。
控件类型为「缩放轴」时,可设置控件左右边界是否可调整,以及初始展示时,左右边界的值(边界可以设置公式类型的缩放边界)。
1)控件边界:「可调整」时,可伸缩控件长短,可移动控件;「不可调整」时,则按设置的初始边界为准,不可伸缩控件长短,但可以移动。
2)初始边界:初始左右边界可决定图表初始展示的范围。不设置时,图表初始展示所有数据;设置后,只显示边界内的数据。
根据分类设置缩放边界时,左右边界的内容一定要跟「分类名」在数据集中的内容保持一致,否则不生效。详情请查看第 4.1 节示例。
左右边界可通过公式自定义,例如获取数据集的前 50%。详情请查看第 4.2 节示例。
对于多分类坐标轴图表,轴类型以及初始边界判断是基于第一层 X轴 判断的,左右边界的写法有所不同。详情请查看第 4.3 节示例。
打开内置模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\控件缩放柱形图.cpt 。
预览效果如下图所示,移动缩放轴选择显示的区域,拉伸缩放轴边界放大缩小区域。
注:缩放轴中的趋势线代表分类值的趋势。
控件类型为「滚动轴」时,对于不同的图表坐标轴类型,其设置不同。
当图表的坐标轴为「分类坐标轴」时,可设置初始分类数,默认为 8 个分类。即图表初始仅展示前 8 个分类的数据。
当图表的坐标轴为「时间/数值坐标轴」时,可设置缩放比例,默认为 30% 。
对于多分类坐标轴图表,轴类型以及初始边界判断基于第一层 X轴 判断。
打开内置模板 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\手势缩放柱形图.cpt 。
在图表属性面板选择「特效>交互属性>图表缩放」,勾选「开启缩放控件」,控件类型选择「滚动轴」,初始分类数为 8 。
预览效果如下图所示,移动滚动轴选择显示的区域。
注:当设置缩放控件后,除了拖动缩放控件外,在绘图区内拖动也将触发缩放控件的滑动。绘图区内拖动方向与控件相反,如向左滑动则控件则对应的图表区域向右滑动。如下图所示:
在图表属性面板选择「特效>交互属性>图表缩放」,勾选「开启缩放控件」,控件类型选择「缩放轴」,控件边界选择「可调整」。
设置初始左边界为公式: ="2010-02-02 00:00:00",初始右边界为公式: ="2010-06-10 00:00:00" 。初始左右边界对应数据集中的字段,如下图所示:
1)PC 端
保存报表,点击「分页预览」,效果如 2.2.1 节缩放效果所示。
2)移动端
同时支持 App 端和 H5 端预览,效果如下图所示:
初始左边界不设置,初始右边界设置为公式 =ds1.value(round(count(ds1.select("订购日期"))/2,0),4) ,即展示前 50% 的数据。
保存报表,点击「分页预览」,效果如下图所示:
同时支持 App 端和 HTML5 端。
图表有多个分类时,设置控件缩放的左右边界写法跟单分类是不同的,下面介绍下如何设置多分类图表的控件缩放。
打开设计器内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\多分类坐标轴柱形图.cpt,该模板有 3 个分类,如下图所示:
选中图表,属性面板选择「特效>交互属性>图表缩放」,勾选「开启缩放控件」,控件类型选择「缩放轴」,控件边界选择「可调整」,设置初始左边界为 ["华东","孙阳","点心"],不设置初始右边界。如下图所示:
注1:此处跟单分类图表写法不一样,不用公式,直接在编辑框中输入,或者在公式定义中输入后删除最前面的 = 。
注2:多分类边界值设置规则:["父分类","子分类"],且边界值根据分类值进行填写。例如该模板分类有三层:地区-姓名-产品,所以按顺序填写:["华东","孙阳","点心"]。
多分类图表的效果如下图所示,可以看到预览时,图表最左边是从华东-孙阳-点心开始的。
1)手势缩放
已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\手势缩放柱形图.cpt
点击下载模板:手势缩放柱形图.cpt
2)缩放轴缩放
已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\控件缩放柱形图.cpt
点击下载模板:控件缩放柱形图.cpt
3)滚动轴缩放
点击下载模板:滚动轴缩放柱形图.cpt
4)多分类图表缩放
已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Chart\ColumnChart\多分类图表控件缩放.cpt
点击下载模板:多分类图表控件缩放.cpt
售前咨询电话
400-811-8890转1
在线技术支持
请前往「服务平台」,选择「在线支持」
热线电话:400-811-8890转2
总裁办24H投诉
热线电话:173-1278-1526
文 档反 馈
鼠标选中内容,快速反馈问题
鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。
不再提示
10s后关闭