使用图层创建帮助叠加
1.概述
本演练向您展示了如何使用交互来允许查看器在仪表板和其他视图中显示和隐藏内容,这些视图可以包括组件、可视化和过滤器。
您可以使用这种交互使元素看起来像弹出窗口或窗口。要同时显示和隐藏多个元素,您可以将它们分组为层,然后隐藏并显示整个图层。下面的示例将一个基本的交互式帮助覆盖添加到仪表板中,当用户将鼠标悬停在帮助按钮上或单击帮助按钮时,它将显示有关如何使用仪表板的信息。
相关视频:的相互作用
2.创建一个新的仪表板
控件中拖动现有指标集,从而创建基本指示板探索窗口到画布。
我们的例子中有一个柱状图。
3.创建帮助叠加层
此示例同时显示和隐藏多个元素,因此我们将它们添加到层因此,我们可以很容易地显示和隐藏所有的时候,查看和编辑。
3.1.添加一个新图层
打开层窗口,然后单击工具栏按钮+符号添加一个新图层。
如果出现子菜单,选择第一个图标来添加一个普通图层。
层2添加到图层窗口并成为当前图层。这将包含帮助相关的组件,如框架和标签。
接下来,通过双击其名称或使用右键选项重命名该图层。
3.2.向新图层添加一个框架组件
点击组件在工具栏中,向右滚动子菜单,然后选择框架。
将框架组件放置在条形图的右上角。
在工具栏中选择编辑标题文字然后为框架键入一个新标题,例如关于这个图表。输入完成后按回车键或单击离开。
3.3.在框架顶部添加标签
进入工具栏,单击组件,然后点击标签。
将标签放置在框架组件上,然后双击它或选择工具栏选项来编辑其文本,并键入描述。
3.4.隐藏帮助叠加层
最初,在查看仪表板时应该隐藏帮助覆盖层。
在层窗口,单击眼睛当前图层的图标(例如,帮助覆盖)来隐藏图层。
4.添加帮助按钮
现在,帮助叠加层已经完成,确保第一个层是当前的层窗口,单击以选择图层1。
2 .在工具栏中,单击组件并选择按钮。
双击按钮或选择工具栏选项来编辑其文本,并将新按钮文本键入为帮助。
4.1.设置显示/隐藏交互
点击设置交互在工具栏中,选择显示/隐藏。(这也被称为更改图层在早期的版本中,它是这样标记的。)
在设置一个显示/隐藏动作对话框,你可以在下面选择一个图层显示层待展示。若要单独显示一个或多个元素,而不是显示整个层,请单击展开控制选择下面的元素显示控制。
在显示层或控件时,您可能希望设置一个单独的交互,以便稍后隐藏相同的内容。例如,查看者可以点击图层的内容来再次隐藏它,或者你可以添加一个单独的关闭按钮。
要使用单个按钮既显示内容又隐藏内容,请单击以启用切换复选框选项,然后单击以选择要在显示和隐藏之间交替的项目(例如,帮助覆盖层)。
单击对话框底部的提交按钮,完成按钮单击的交互设置。
5.测试帮助叠加
要测试您的交互,请单击沙箱视图在工具栏中查看仪表板中的新浏览器选项卡,然后单击帮助按钮。
6.脚本层
更改图层操作可用于显示、隐藏或切换图层内置的事件,但如果你需要从你自己触发同样的动作脚本相反,你可以像下面这样使用JavaScript:
var canvasService = this.getService(" canvasService ");var helpLayer = canvasService。getLayersByFriendlyName("Help Overlay Layer")[0];// var helpLayer = this.baseViewService.currentView.control.layers[1];if (helpLayer.hidden) canvasService.showLayers([helpLayer]);其他canvasService.hideLayers ([helpLayer]);
这个脚本根据显示名称获取图层就像本文示例中分配给层的那个一样,或者您也可以按照注释掉的代码中指示的索引来获取它。