其他交互

<< Click to Display Table of Contents >>

当前位置:  制作可视化报告 > 数据处理与分析 

其他交互

复制链接

1. 概述

1.1 功能简介

除了超链接外,用户还可以灵活定义其他交互事件,包括鼠标单击、鼠标移入、鼠标移出这三种交互事件,执行动作支持显示、隐藏、控制模型动画、切换模型视角、等待。

1.2 应用场景

根据不同的业务分析场景,动态展示对应的图表,例如点击差异分析按钮,显示销售数据柱状图,点击地域分布按钮,显示销售数据地图。

动态控制模型视角。

动态控制模型动画。

1.3支持添加其他交互的组件

所有支持超链接的组件均支持添加其他交互。

2.功能说明

选择一个支持添加超链接的区域,例如柱状图的柱子,鼠标悬浮到【设置 > 交互 > 其他交互】后面的加号图标,可以选择添加交互事件。

DataProcess_Interaction1

交互事件:下拉一级菜单为交互事件,支持鼠标单击时、鼠标移入时、鼠标移出时,一个区域可以添加多个交互事件。

执行动作:鼠标完成动作后执行的动作,同一个交互事件下可以依次添加多个动作。

【显示】:控制显示某一个组件或者模型。

1)显示组件

DataProcess_Interaction2

目标类型选择“组件”,下面显示相关设置项,支持选择报告中的任意一个组件或者组合,也支持设置动画,包括空、淡入、从左滑入、从右滑入,设置空代表无动画效果,支持自定义动画时长。

2)显示模型

DataProcess_Interaction3

目标类型选择“模型”,支持选择报告中的3D模型组件内的一个模型或组合,不支持设置动画。

示例:

先将图表1和3d模型组件里面的Eiffel_Tower隐藏。

DataProcess_Interaction4

在顶部添加一个文本框,添加交互事件:鼠标单击时显示图表1和Eiffel_Tower,如下。

DataProcess_Interaction5

您可以在交互事件列表里面点击编辑或删除按钮,编辑或删除某一个动作。

预览查看交互效果:

DataProcess_Interaction5

也可以添加从左滑入效果:

DataProcess_Interaction6

【隐藏】:控制隐藏某一个组件或者模型,整体菜单和“显示”类似,只是执行的动作相反。

1)隐藏组件

DataProcess_Interaction6

目标类型选择“组件”,下面显示相关设置项,支持选择报告中的任意一个组件或者组合,也支持设置动画,包括空、淡出、从左滑出、从右滑出,设置空代表无动画效果,支持自定义动画时长。

2)隐藏模型

DataProcess_Interaction7

目标类型选择“模型”,支持选择报告中的3D模型组件内的一个模型或组合,不支持设置动画。

示例:

添加一个文本框,添加交互事件:鼠标单击时隐藏图表1和Eiffel_Tower,隐藏图表1动画为向左滑出,动画时长500ms。

DataProcess_Interaction8

预览查看效果:

DataProcess_Interaction8

[控制模型动画]:开启或关闭3D模型组件内部的动画。

DataProcess_Interaction9

选择组件:当报告内存在多个3D模型组件时,您可以选择其中一个进行控制。

选择需要控制的动画:当选择一个组件后,下方列表会展示当前渲染的模型文件内包含的动画,您可以勾选需要控制的动画。
操作:可以选择开启或关闭动画,默认开启。

仅控制交互对象自己的动画:勾选以后,仅控制和操作对象关联的动画,例如列表内选择的动画包括动画1、动画2、动画3,操作对象是模型A,模型A关联动画为动画1,此时操作模型A,只会开启或关闭动画1。

示例:

添加一个文本组件,并添加交互事件:鼠标单击时开启图表3的螺旋桨动画。

DataProcess_Interaction16

预览查看交互效果:

DataProcess_Interaction16

[切换模型视角]:切换3D模型至某一视角。

DataProcess_Interaction10

选择组件:当报告内存在多个3D模型组件时,您可以选择其中一个进行控制。

视角:当选择一个组件后,下拉列表会展示当前模型组件的模型列表以及自定义的视角,若选择的是模型,会将相机聚焦到该模型;若选择的是视角,则直接将镜头切换到该视角。

示例:

先给3D模型组件添加一个正视角,如下:

DataProcess_Interaction11

在顶部添加两个文本,文本1添加交互:鼠标移入时切换模型视角为模型的Eiffel_Tower;文本2添加交互:鼠标移入时切换模型视角为视角-正视角。

DataProcess_Interaction12

DataProcess_Interaction13

预览查看交互效果:

DataProcess_Interaction13

[等待]:设置动作等待时间。当您添加了多个交互动作时,这些动作通常是同时执行的,如果您期望动作存在执行先后顺序,可以在两个动作直接添加等待时间。

示例:

图表5默认显示,图表6隐藏。

DataProcess_Interaction14

添加一个文本,依次添加3个鼠标单击时的交互事件:隐藏图表5、等待2000ms、显示图表6,并且显示和隐藏添加滑入滑出动画。

DataProcess_Interaction15

预览查看交互效果。

DataProcess_Interaction15