对比说明
三种布局方式显示效果以及使用场景对比如下:
效果 | 布局方式 | 描述 |
---|---|---|
高宽自适应(默认值) | 设置了高宽自适应后,仪表盘会自动调整大小以填充用于显示仪表盘的窗口; 此种布局方式适用于单屏展示的仪表盘,比如CEO看板; 功能详情请参考 高宽自适应模式:展示型仪表盘 章节。 | |
宽度自适应 | 设置了宽度自适应后,仪表盘会自动调整显示宽度以适应不同设备的宽度,但高度固定以实现垂直滚动效果; 此种布局方式(流式布局)适用于报告型的仪表盘,比如汽车销售季度报告; 功能详情请参考 宽度自适应模式:报告型仪表盘 章节。 | |
自由布局 | 设置了自由布局的布局方式后,不管用于显示仪表盘的窗口的大小如何,仪表盘都保持相同的大小; 此种布局方式适用于大屏展示的仪表盘(明确知道显示窗口大小),比如监控中心大屏; 另外自由布局能指定组件的确切位置,如果仪表盘中有浮动对象,选用此种布局效果更佳; 功能详情请参考 自由布局模式:大屏型仪表盘 章节。 |
注意 |
---|
自助仪表盘布局需遵循规则:从上到下,从左到右。切换布局也需遵循此规则进行自动调整。(如:平板/电脑布局切换到手机布局)。 |
自由布局
缩放方式
自由布局支持设置缩放方式,四种缩放方式详细说明如下:
缩放方式 | 效果 |
---|---|
等比缩放宽度铺满定义: 宽度铺满全屏,高度按比列自动缩放。 说明:
| |
等比缩放高度铺满定义: 高度铺满全屏,宽度按比列自动缩放。 说明:
| |
全屏铺满定义: 不保持高宽比例,按当前屏幕大小显示全部内容。 | |
不缩放定义: 保持画布原先的大小。 |
注意 |
---|
目前手机端暂不支持缩放。 |
渲染方式
支持设置图形渲染方式。两种渲染方式:
- SVG:一种使用XML描述2D图像的语言。文本渲染能力强,刷新能力弱。适用于大区域渲染程序,比如高保真图形、带有某些特效的静态图像。
- Canvas:HTML5新增的DOM,提供了像素级图形编程接口。文本渲染能力弱,刷新能力强。适用于图像密集型编程。比如高性能图形、复杂场景的实时动画。
鹰眼
注意 |
---|
“鹰眼”功能为V9.7版本功能 |
鹰眼用于在自由布局模式下通过缩放的方式来查看自助仪表盘的全景图,以便用户从全景的角度对自助仪表盘进行调整。
开放鹰眼功能首先需要将当前自助仪表盘设置成“自由布局”模式,然后通过缩小、放大和高宽自适应三种方式来查看全景图:
注意:画布大小缩放是以百分比来设置的,其范围最大值为500%,最小值为25%。
信息 |
---|
在自由布局模式下,提供了一些键盘的快捷键如下:
|