6.3 图册资源

6.3.1 图表

​ 用户创建的图表都将显示在下图中所示的区域。图表可以采用自适应布局,也可以采用自由块布局。将图表加入到图册中后,图表会标识为已使用,在当前图册页不能再插入该图表,但可以在另一页再次使用。

story_resource/story_resource-1

6.3.2 标题

​ 图册标题仅可以直接拖拽到图册的顶部区域,不能拖拽到自由块中。如下图所示,将标题拖入图册后,将会弹出文本编辑框,从而编辑标题的文字和格式。

story_resource/story_resource-2

​ 如果需要编辑标题,可以双击标题,或选中标题后点击右上角的“编辑”按钮,完成编辑后点击“确定”即可生效。

story_resource/story_resource-3

6.3.3 富文本

​ 富文本可以采用自适应布局和自由块布局。将富文本拖拽到图册中,将弹出文本编辑框,从而编辑文本内容和格式。

story_resource/story_resource-4

​ 同样地,如果需要对内容进行修改,可以双击富文本,或点击资源块右上角的“编辑”按钮,修改后确定即可。

​ 从V5.3.06版本开始,支持在富文本中引用参数。使用方法为:

    1. 将使用的参数拖拽至图册中;
      2. 在富文本中以如下格式引用参数:${参数标识},注意是参数标识而非参数标签;
      3. 富文本中将自动显示参数值。

6.3.4 图片

​ 图片可以采用自适应布局和自由块布局。将图片拖拽到图册中,将弹出如下窗口,提示用户输入图片地址或上传图片。

story_resource/story_resource-5

6.3.4.1 图片地址

​ Dataviz图册中的图片资源支持使用网络图片,用户在勾选“请输入图片地址”的后,将图片地址填入,点击确定即可。

6.3.4.2 本地上传

​ 用户可将本地的图片上传至Dataviz服务器中,然后在图册中使用。点击“本地上传”后选择希望上传的图片,上传后的图片将自动选中,点击确定即可使用该图片。

story_resource/story_resource-6

​ 如果希望将某图片删除,可将鼠标悬浮在图片上,点击右上角的删除按钮,即可将其删除。

story_resource/story_resource-7

6.3.5 视频

​ 视频可以采用自适应布局和自由块布局。拖入视频资源后,会弹出视频设置对话框。可以输入视频的网络地址,并设置预加载、自动播放等属性。

story_resource/story_resource-8

【注意】这个功能目前是使用html 5的\标签实现的,一共支持五种视频格式:Ogg、MPEG4、WebM、FLV和F4V,且不同浏览器存在一定的差异。

6.3.6 空白

​ 空白仅支持自适应布局,用于占位,方便调整图册布局,增强美观性。

6.3.7 网页

​ 网页支持自适应布局和自由块布局,将网页拖拽到图册中后,将弹窗提示用户输入网页地址,用户可以输入网页的绝对地址,也可以使用相对地址,相对地址的根路径在dataviz-web/common/config.js文件中指定,对应属性名为customPageRootUrls。

story_resource/story_resource-9

story_resource/story_resource-10

6.3.8 标签页

​ Dataviz的资源块默认只能拖入一个资源。如果用户希望在一个资源块中加入多个资源,并可以让多个资源轮流显示。这时可以使用“标签页”组件。标签页组件支持自适应布局和自由块布局,不同于图表、图片等资源,它和自由块一样是一种容器,可以包含一个或多个资源。

story_resource/story_resource-11

6.3.8.1 使用方法

​ 将标签页组件拖入图册中,此时会自动生成三个Tab页,每个标签页都可以放置图册资源,如下图所示:

story_resource/story_resource-12

​ 在选中标签页资源时,资源块的工具栏上比其他资源多出了“+”和“-”两个按钮,分别用于删除当前Tab页和添加新Tab页。

story_resource/story_resource-13

6.3.8.2 标签页设置

6.3.8.2.1 标签名称和标签样式

​ Dataviz的标签页共有3种样式:“标签页”、“轮播”或“下拉列表”,默认设置为“标签页”。除轮播外,用户均可自定义Tab页的名称。

​ 选择“轮播”时的效果:

story_resource/story_resource-14

​ 选择“下拉列表”时的效果:

story_resource/story_resource-15

​ 三种样式的区别在于:

  1. 标签页会显示标签页头,下拉列表会显示列表控件,均会占用一小部分空间;轮播时资源占满整个资源块;

  2. 标签页可点击切换标签页,下拉列表可直接选择希望切换的标签页,轮播时鼠标悬浮会显示左右切换的按钮,用于切换资源;

  3. 选择“轮播”时没有标签名称的设置;

  4. 选择“下拉列表”时会把tab页的名称组装成一下拉列表,如果tab页过多推荐选择以下拉列表显示。

6.3.8.2.2 自动切换

​ 勾选“自动切换”选项后,在图册播放时,将按照设定的切换间隔自动切换Tab页。

story_resource/story_resource-16

6.3.8.2.3 绑定自由块

​ 如果用户希望将已有的自由块进行轮播,又不希望重新将所有的资源删除后重新加入到标签页中,或者不想破坏已有的布局,那么可以使用标签页的绑定自由块功能。操作方法如下:

  1. 选中标签页,然后点击“绑定自由块”按钮;
  2. 在弹出的页面中,双击或选中后点击“→”按钮,将希望绑定到当前标签页的图册资源。举例而言,将“测试图表1”和“测试图表2”绑定到标签页Tab0,将“测试图表3”绑定到标签页Tab1。如果希望将已绑定的资源移除,可双击或选中后点击“←”按钮;
  3. 点击“确定”,完成设置。

​ 该操作过程和效果如下图所示。在删除绑定了自由块的标签页后,自由块将自动释放,不会随之删除。

story_resource/story_resource-17

6.3.8.2.3 自由设定图片、富文本、图标作为tab切换按钮

此功能结合“绑定自由块”功能使用,仅能控制自由块。
story_resource/jumptotab 在配置页面可以设定图片、富文本、图标作为tab切换按钮,可配置跳转至哪一个tab。
此功能进一步释放了灵活性,可以实现自定义的切换按钮,样式和布局位置更自由。

6.3.9 装饰组件

6.3.9.1 边框

​ 边框组件为图表提供多样灵活的边框样式。它独立与图表内容,基于图层的框架设计使边框的堆叠顺序易于控制。 ​ 点击图册编辑界面左侧的“装饰组件”,可以看到“简洁边框”和“科技边框”两类边框,用户可以根据风格的需求自由选择。边框无需拖拽到自适应布局或自由块中,可以直接拖拽到图册中并自由放置。

story_resource/story_resource-18

​ 边框资源具有2项设置:

  • 交互穿透:在图册播放时就不会因为覆盖了边框而影响图表交互,在选择交互穿透后如果希望选中边框,需要在图层中选择;

  • 置于底层:边框被置于自适应布局所在图层之下。

6.3.9.2 标题栏

​ 标题栏是配合标题使用的装饰组件,同样无需放置在自适应布局或自由块中。

story_resource/story_resource-19

6.3.9.3 动效

​ 动效即动画效果,为图册添加一些活动的元素,模拟简单的交互效果,使图册看起来更加生动活泼。动效同样无需放置在自适应布局或自由块中,且不会因为缩放而造成失真。用户可根据需求设置动效播放的速度,最高为5,最低为1。

story_resource/story_resource-20

6.3.9.4 图标

​ 为了用户能够快捷地进行图册美化,Dataviz内置了大量的图标供用户使用。图标无需放置在自适应布局或自由块中,可自由缩放和放置。

story_resource/story_resource-21

6.3.9.5 按钮

​ Dataviz支持用户在图册中放置按钮,实现预设的功能。目前,按钮组件支持刷新图表数据、重置过滤条件和自定义设置,其中,自定义设置需要用户自行编写js脚本进行设置。

6.3.9.6 时钟

​ 在图册中使用时钟组件可显示当前的日期时间,并且可以设置日期时间的展示方式和格式。

6.3.9.6.1 展示格式

​ 假设当前时间为2018年9月3日14点4分9秒:

  • yyyy:表示完整的年,如:“yyyy年”->2018年

  • yy:表示年的后两位,如:“yy年”->18年

  • M:表示月,如:“M月”->9月

  • MM:表示月,如果月份小于10十位会用0补齐两位,如:“MM月”->09月

  • d:表示日,如:“d日”->3日

  • dd:表示日,如果日小于10十位会用0补齐两位,如:“dd日”->03日

  • h: 表示时12小时制,如:”h时”->2时

  • hh: 表示时,12小时制,如果时小于10十位会用0补齐,如:”hh时”->02时

  • H: 表示时,24小时制,如:”H时”->14时

  • HH: 表示时,24小时制, 如果时小于10十位会用0补齐, 如:”HH时”->14时

  • m:表示分,如:”m分”->4分

  • mm:表示分,如果分小于10十位会用0补齐, 如:”mm时”->04分

  • s: 表示秒,如:”s秒”->9秒

  • ss: 表示秒,如果秒小于10十位会用0补齐,如:”ss秒”->09秒

  • tt:表示上午或者下午,上午为am,下午为pm

  • TT: 表示上午或者下午,上午为AM,下午为PM

6.3.9.6.2 字体、字号和字体颜色

​ 目前,时钟组件支持3种字体样式:微软雅黑、液晶数字和尚黑。用户还可以自行设置字号、颜色和粗体。

results matching ""

    No results matching ""

    results matching ""

      No results matching ""