6.2 图册布局

​ Saca Dataviz 的图册支持两种布局:自适应布局和自由块布局,且支持两种布局模式同时使用。自适应布局更加注重整齐一致,自由块布局的自由度更高,用户根据实际需求将两种布局进行结合,可以获得极佳的展示效果。此外,Dataviz 支持图册分页,在同一图册中可以有多个页面,每个页面之间互不冲突。

6.2.1 自适应布局

​ 在自适应布局下,用户拖拽到图册中的每一项资源都将按照分割区域有序排列。首先新建图册,在图册编辑页面,从左侧图表区域选择一个图表,拖入页面中央的编辑区:

story_layout/story_layout-1

​ 用户可以拖拽左侧“资源”下的所有组件以及“图表”下的内容到页面中心位置的编辑区。关于图表资源的介绍请参考本文档第 6.3 节,本节将继续使用图表作为示例。 ​ 在完成上述步骤后,用户可以继续拖拽资源到图册中。根据用户放置的位置,图册将自动为新的资源设置分割区域。例如下图中所示的样例,将图表拖拽到页面的左侧,则可以与前一图表平分页面。类似地,将图表拖拽到页面的上、下、右侧,效果以此类推。在拖拽时,图册将显示阴影区域,提示用户在当前位置放置资源后将取得的效果:

story_layout/story_layout-2

​ 类似地,继续在左侧的子区域中加入图表:

story_layout/story_layout-3

​ 如果希望删除图表,可以选中后,点击右上角的“删除”按钮。在删除图表后,图册将会对这一子区域重新布局。

story_layout/story_layout-4

​ 如果希望直接替换图表,可以直接将新图表拖拽到希望替换的图表上。

story_layout/story_layout-5

​ 资源摆放好后,还可以拖动区域边框调整资源所在区域的大小。

story_layout/story_layout-6

6.2.2 自由块布局

​ 除自适应布局外,SaCa DataViz 还支持通过“自由块”实现自由布局。使用自由块可以让布局显得灵活多变,且更有效地利用页面空间。自由块与自适应布局互不影响,可以被摆放在图册页的任意位置,例如下图所示,“测试图表 1”是位于自由块中的资源,可以随意放置。

story_layout/story_layout-7

​ 要使用该功能,需要先从页面左侧的“资源”栏中,拖拽“自由块”到图册页中:

story_layout/story_layout-8

story_layout/story_layout-9

​ 此时自由块还没有内容,显示空白。用户可以将图表、图片等其他资源拖放到自由块中。每个自由块只能显示一个资源,再次拖入会替换先前的资源。

story_layout/story_layout-10

​ 可以任意拖动自由块以改变位置,或者拖动边缘区域以调整大小。多个自由块可以重叠摆放。

story_layout/story_layout-11

​ 新拖入的自由块的大小为固定值(300px * 300px),放到图册页中时会转换为相对于图册大小的百分比。当图册适应页面大小时,自由块的大小也会相应变化。

6.2.1.1 同时操作多个自由块

​ 在按住 Ctrl 键的同时,点击鼠标左键,就能够同时选中多个自由块。如下图所示,在已选中的多个自由块外围,出现绿色虚线框,表示当前选中的范围。

story_layout/story_layout-12

​ 目前选中多个自由块的功能包括:

  1. 拖动绿色虚线框,可以同时移动已选中的多个自由块;
  2. 多选后,可使用工具栏上的六个按钮进行自由块对齐,如下图所示,从左到右依次为顶端对齐、底端对齐、左对齐、右对齐、横向分布、纵向分布。

story_layout/story_layout-13

6.2.1.2 复制、粘贴

​ 自由块的复制有两种方法,第一种是按快捷键 Ctrl+C,复制成功后页面上方将会弹出提示:

story_layout/story_layout-14

​ 另一种是选中一个自由块,点击其上方的下拉箭头,点击后出现下拉菜单:

story_layout/story_layout-15

​ 可在菜单中选择“复制”,即可复制当前自由块的大小和内容。之后可按快速键 Ctrl+V 进行粘贴。

【注意】特殊情况:如果自由块中是图表,在粘贴到同一图册页中时,会自动清除新自由块中的内容。目的是保持一个图表在一个图册页中至多使用一次的规则。粘贴到其他页时,图表正常显示。

6.2.1.3 快速置顶置底

​ 自由块等一些其他资源组件有图层的概念,具体内容请参见第 6.6 节。使用快速置顶置底功能,可以便捷地让某一个自由块置于顶层或底层。使用方法是从自由块的下拉菜单中进行选择:

story_layout/story_layout-16

6.2.1.4 快捷键支持

​ 在操作自由块时,可使用以下快捷键:

  • Ctrl+C:复制选中的自由块或边框
  • Ctrl+V:粘贴已复制的自由块或边框
  • Ctrl+D:删除选中的自由块或边框
  • Ctrl+方向键上:置于图层顶部
  • Ctrl+方向键下:置于图层底部
  • Shift+B:临时显示或隐藏自由块的边框线。另外在 dataviz-web/common/config.js 中提供了全局配置,默认为显示:

story_layout/story_layout-17

6.2.3 图册页面

6.2.3.1 添加图册页

​ 在图册编辑界面右侧的工具栏中,选择“图册页”,然后点击“添加图册页”按钮,即可添加图册页。不同页可以引用相同的图表资源。

story_layout/story_layout-18

6.2.3.2 删除图册页

​ 鼠标悬浮在某一图册页的缩略图上,右上角会出现功能按钮。点击“删除”按钮,会弹出是否确认删除的提示,点击确定即可删除该页。当图册只有一页时,不可以删除。

story_layout/story_layout-19

6.2.3.3 复制图册页

6.2.3.3.1 图册内复制

​ 鼠标悬浮在某一图册页的缩略图上,右上角会出现功能按钮。点击“复制此页”按钮,可对该页进行复制。生成的新页会直接插入到鼠标悬浮页的后面,并自动选中。

story_layout/story_layout-20

6.2.3.3.2 跨图册复制

​ 首先切换到要复制的图册页,然后点击下图所示按钮,即可完成对当前页的复制。

story_layout/story_layout-21

​ 之后就可以使用快捷键 [Ctrl+V] 进行粘贴。

【注意】当跨项目粘贴图册页时,会自由删除图册页中的图表、图片,以及文本和 Widget 标题中引用的 KPI,因为这些资源都是属于特定项目的,其他项目中没有这些资源。

6.2.3.4 调整图册页顺序

​ 如需调整图册页的顺序,可以通过拖拽的方式进行调整,如下图所示。

story_layout/story_layout-22

6.2.4 图册大小

​ Saca Datavia 的图册默认的编辑和播放模式是自适应,在播放时会根据屏幕分辨率进行图册的自适应变化,所以播放的效果可能与编辑页面存在些许差别。如果用户使用的屏幕的宽高比比较固定,可以使用自适应模式下的锁定宽高比模式;如果希望在播放时根据屏幕分辨率的变化进行文本缩放,可以勾选“播放时文本缩放”选项;如果用户使用的播放屏幕比较固定,可以考虑使用固定分辨率的编辑和播放模式。

story_layout/story_layout-23

6.2.5 自由块大小与位置百分比/像素值的切换

​ 自由块的大小与位置默认单位为百分比,如果想要百分比切换成为像素值,前提条件是设置为固定分辨率。选中开启精确像素值,就可以把百分比转换成像素值,反之亦然。 story_layout/story_layout-25 story_layout/story_layout-24

results matching ""

    No results matching ""

    results matching ""

      No results matching ""