F.2. Histogram_Basics

“Histogram_Basics”蓝图将作为我们在场景中调用的主蓝图。我们通过这个蓝图可以添加1+N个“Histogram_Columnar”蓝图。在配合其他组件从而得到一个完整的图表。

F.2.1. 添加蓝图基础组件

首先我们可以看出，这次的组件结构非常的多。因为所有图表均由时间线、数据值标线、数据名称标注与数据图表构成。这样一来我们可以将其分成“Numerical line（数据值标线）”、“Name line（名称标线）”、“tagging（数据名称标注）”、“Time line（时间标线）”这4大类，其中所使用到的组件类型主要是“静态网格体组件”与“文本渲染组件”。下面我会挨个分开先把这些组件的具体作用讲解透彻。

• 静态网格体组件
  

1. 线

   就一个细长的立方体组件，主要用来当做线来时使用为用户划清边界与进行数据参考。

   
   

2. 标注

   标注类一个静态网格组件，由一个平面模型构成。这里我命名为了“Plane”主要用于显示各类数据的颜色便于用户区分数据，其次拥有一个点击显示或隐藏数据的功能。

   创建好这个组件后，我们就需要将之前准备的“Name_tagging”材质创建一个子集实例材质赋予给这个静态网格体组件，供我们之后动态调用对应数据颜色使用。

• 文本渲染组件

  

  文本渲染组件是用来将文本专为一种可视模型的组件。这个组件需要配合之前准备的“Oswald_material”文本材质来使用。

  首先设置材质的“元素0”与“文本材质”，之后选择对应的我们之前所使用的字体。剩下的就是一个基础的排版格式就不多说了。

  
  

• Numerical line

  “Numerical line”是数据参数标线，我们需要让用户知道图表当前所在的对应数值位置。

  
  

• Time line

  对于折线型图表，我们不仅需要数据参数的标线。还需要一个横向的时间标线。“Time Line”就是用于循环更新时间的一组功能组件。

  
  

• tagging

  “Tagging” 是由数个“文本渲染组件”+"Plane"组件组合而成一个数据标注组件。其用途就是对数据折线进行颜色与文本标注的区分。其次为了可以使用户单独查阅某一组数据还增加了点击显示与隐藏的功能。

  
  

• Name line

  当我们将图表旋转到一定角度，使图表变换成柱状图表时，那么我们将不在需要时间线的组件，将与之替代的是每组数据对应的名称。
  

• Name Year

  当图表位于柱状图表模式的时候，虽然我们不需要时间线的显示方式了。但是数据还是需要进行更新，而更新这就需要向用户提供当前更新数据的具体时间时间。而“Name Year”这组组件就是用于想用户提示当前数据的时间的组件。
  

• Histogram_Columnar_Child

  “Histogram_Columnar_Child”是一个子Actor组件，通过这个组件分别调用了5个“Histogram_Columnar”5个子集实例蓝图。从而实现一个图表中加载5组不同的数据。我们可以通过蓝图的子Actor组件细节面板分别设置每个“Histogram_Columnar”子集实例蓝图的一些基础参数。如“Number Of Columns”、"Property Name"、"Model Z-axis Scaling"等一些公开的参数。切记一定要在蓝图中设置，场景的世界大纲内是不能设置的。
  

• Data panel

  “Data panel”这组组件是用于当用户与图表进行交互操作时，向用户展示具体参数点的当前实际参数的。这组组件分别会根据用户所选择的点渲染当前数据的“名称”、“时间”、“具体数值”。

  
  

• Data marking

  在传统的二维图表中，当用户进行交互时会有一个当前数据标记的系统行为，用来提示用户当前查看的数据节点位置。但是这个标记并不是一定要有的。

  但是当图表从二维转变到三维时，因为透视关系有时用户并不能很直观的知道具体查看的是那组数据的数据节点。所以就需要制作一个三维坐标标记。

F.2.2. 创建“构建图表”函数

在图表构建时就需要对每个子Actor组件调用的”Histogram_Columnar“子集实例蓝图进行颜色构建。”tagging“下的各个标注的颜色与数据名称进行构建。同时还需要编写一些功能逻辑，方便我们在后续的事件中调用，这样看起来会更清晰。

F.2.2.a.Initialize color and name

1. 通过“Property Name”变量获取设置数据名称

   

   首先需要读取子Actor的变量，并将其转换成一个Actor，然后将其转换成对应的“Histogram_Columnar”子集实例。这时我们就可以获取到“Histogram_Columnar_Child”中的“Property Name”变量，当拿到“Property Name”值后我们可以将其转换成文本并用来设置“文本渲染组件”的文本内容。

   
   

2. 设置“tagging”组件内的动态材质

   首先创建5个线性变量并命名为“Name Color”,这5个变量用来控制5个图表的颜色用以数据区分。之后就是对“tagging”组件组里的“文本渲染组件”与“Plane”组件进行材质实例化然后修改其颜色。
   

F.2.2.b.Child_actor

5个“Histogram_Columnar_Child”子Actor组件肯定不能重叠的，所以为了在运行时出现错误，我们在就需要对其位置进行一个初始的设置。

这里我在设置组件相对位置时使用了一个浮点变量，为了就是我们可以方便的编辑。

F.2.2.c.Child Actor Color

“Child Actor Color”函数时用来初始化5个“Histogram_Columnar_Child”组件的，这时有人就要问，在创建“Histogram_Columnar”时不就已经初始化过了吗？首先我们要分别初始化5个“Histogram_Columnar”的子集实例蓝图，当然我们可以手动通过调整“子Actor组件”的“子Actor模板”项来初始化我们所想要的内容，但是这样我们分别调整5次而且后续调试修改也不方便。所以我们直接通过程序在“Histogram_Basics”蓝图里进行一次统一传值统一设置。

1. 函数输入

   

   首先为函数创建6个线性颜色输入接口，其中5个命名为“Name Color”对应我们创建的“Name Color”变量，剩下一个命名为“Color Quotient”对应我们在“Histogram_Columnar”中创建的“Color Quotient”变量。之后在创建一个浮点与布尔输入接口，分别命名并对应“Histogram_Columnar”中的”Color Coefficient“与"New Visibility"变量。

   
   

2. 类型转换并执行每个子集实例蓝图中的“Initalize Color”

   

   通过类型转换将每个“子Actor组件”转换成对应的“Histogram_Columnar”子集实例蓝图，然后执行每个“Histogram_Columnar”子集实例蓝图内的“Initalize Color”函数。执行时我们将当前的函数的输入接口对应链接到每个对应的函数上，这时我们就可以通过当前蓝图初始化“子Actor组件”所调用的子集实例蓝图。

F.2.2.d.Line

当用户在旋转图表时，相对的一些数据标线与标注也需要移动，已满足用户在任何角度都可以轻松的查看到标注线与标注内容。而“Line”函数就是满足这个功能的函数。

1. 创建枚举

   

   首先创建一个枚举并命名为“Angle_enumeration”，这个枚举在之后的函数中将用来判断角度区域，依次来执行不同的程序。

   
   

2. 角度区域

   

   
   

3. 通过“Angle”判断所在区域并按照区域执行不同的程序

   

   创建一个整数变量“Angle_enumeration_index”，这边来会作为枚举选择的索引值来使用。

   通过“Angle”变量（这个里的“Angle”是我在当前蓝图中再次新建的）进行范围浮点判断，如果为“True”最会设置“Angle_enumeration_index”为对应索引并向后判断执行不同的程序。

   
   

4. 标线与标注移动

   

   如果设置移动这个就不多说了，主要来看下方的浮点计算。首先我们知道标线的开始点与结束点。那么我可以通过插件让其在这2个点之间来回移动。但是我们需要"Alpha"来对其进行控制。而这个“Alpha”就是,通过“Angle”在进行限制后进行一次浮点除法除以“90”来获得。如果当前角度在180°-270°那么我们仅需要在除法前增加一个减法运算减去“90”。这样一来用户在旋转图表时，标线与标注就会实时移动。

F.2.2.e.Name Hidden

“Name Hidden”函数为用户提供了数据过滤功能，可以通过点击对应的数据标点对数据进行显示与隐藏的操作。

1. 函数输入

   

   这里需要“子Actor组件”、“文本渲染组件”、“静态网格体组件”接口，分别命名为“Child”、“Name"、"Plane"。这3个接口时用来获取我们需要隐藏与显示的组件的。

   然后还需要2个线性颜色接口“Original Color”与“Hover color”这2个接口是负责控制当组件隐藏与显示时标注组件所需显示的颜色。

   最后我们还需要一个布尔接口“Hidden”，后续我们会通过点击事件触发切换节点，而我们则需要获取到切换节点的布尔值，通过这个布尔值来控制显示与隐藏。

   
   

2. 切换可视性

   

   如何切换颜色这里就不做说明了。这里主要说下怎么切换显示。

   后续我们通过“Flip Flop”切换节点的布尔值“Is A”若果是“A”则返回“Ture”。那么我们的所有模型在运行时可视性均是“Ture”，那么我们需要在点击“Plane”是让其更换为"False"。但是在我们点击时肯定触发的是A，所以返回的是“Ture”这时就出现一个小BUG，所以我们在输出"Hidden"是需要先增加一个“NOT”布尔节点。这个点击就是一个反转节点，如果输出是“Ture”那么会将其反转成“False”，这时当我们点击“Plane”时就可以隐藏，再次点击时就是显示。

F.2.2.f.marking

为了可以让用户更准确的得知所交互的数据点，我们需要为其增加一个三维定位功能。而“marking”函数就是控制“Data marking”组件来做三维定位的功能函数。

1. 函数输入

   

   我们需要3个浮点接口分别命名为“X”、“Y”、“Z”用来获取所需定位的位置来设置“Data marking”各个组件的位置。还需要一个布尔接口命名为“Hidden”来控制其隐藏与显示。

   
   

2. 减量运算

   

   这里重点说下这个减法运算，其余的节点都很好理解。

   当我们获取所需定位的位置后，为了确保“Data marking”组件不会遮挡我们的图表，我们需要做一个减量运算让其避开图表交互模型“Sphere”。之后我们在用经过减量的浮点值去设置对应的“Data Marking”组件的所需定位的轴向值。

F.2.2.g.Mouse Hover Sphere

当用户鼠标指向某个“Sphere”时，既是用户明确需要知道当前数据的时候。所以我们需要对“Data panel”组件内的“文本渲染组件”进行数据渲染，还要对“Data Marking”组件内的组件进行三维定位。最后为了减少其他干扰元素，我们需要将其他图表进行隐藏。所以这套函数是数个小函数并结合跨多蓝图功能实现的一个函数。

1. 函数输入

   

   首先我们先需要一个布尔接口用来控制“Data panel”显示具体数据显示并将接口命名为“Mouse Hover Sphere Hidden”。接下来我们就需要几个文本接口和一个线性颜色接口分别命名为“Name”、“Name Pane Color”、“Year”、“Month”、“Day”、“Data”这些接口将会为"Data Panel"进行数据的渲染。之后我们需要三个浮点接口分别是“X”、“Y”、“Z”用来控制“Data Panel”与“”Data Marking"组件组的显示位置。

   最后我们还需要一个整数接口与一个布尔接口，分别是“Other Hiden”与"Hover"。这组接口是用来控制当用户与数据交互时，那些图表将会被隐藏。

   
   

2. 渲染Data Panel数据

   

   首先我们通过“Mouse Hover Sphere Hidden”接口控制“Data Panel”的父级隐藏与显示，然后通过“Name”、“Name Plane Color”、“Year”、“Month”、“Day”、“Data”从数据表获取到数据后为“Data Panel”下对应子集进行渲染赋值。这里要注意下“Data Panel”设置隐藏时，勾选了”Propagate to Children“不然子集不会一起被隐藏。

   
   

3. 设置Data Panel与Data Marking组件的相对位置

   

   接下来我们通过与数据点交互时获取到的XYZ值来设置“Data Panel”与”Data Marking“组件组的显示位置。

   
   

4. 设置图表的显示与隐藏

   

   首先创建一个“子Actor组件”数组变量命名为“Child”，之后可以他通过悬停事件查抄到当前“子Actor组件”的索引。然后我们可以通过“不等于”索引布尔来设置其他为悬停的“子Actor组件”为“隐藏”。在执行隐藏前为了避免程序错误，增加了一个布尔判断，用来判断用户是否进行了悬停操作。只有用户悬停时才能进行隐藏。

F.2.2.h.Sphere Angle

“Sphere Angle”是为了能够让用户在旋转图表时，“Data Panel”能够实时的面向用户为用户提供良好的查阅数据体验而创建函数。

F.2.2.i.构建脚本

函数创建完毕后来构建脚本，首先我们需要构建数据标注的文本内容与颜色“Initialize Color and Name”，然后确定每个“Histogram_Columnar_Child”组件的位置“Child Actor”。之后我们需要设置每组图表的颜色等基础信息。最后我们需要将“Histogram_Columnar_Child”5个“子Actor组件”创建为“Child"变量供我们在”Mouse Hover Sphere“函数中调用。

F.2.3. 图表事件

现在我们要将函数串联成事件。这次有一部分事件会涉及跨蓝图或多蓝图多含糊一同调用。

F.2.3.a.事件开始运行

首先启用输入，这样才可以对图表进行控制。之后需要让图表进行运行加载数据图表，我们需要通过“获取类的所有Actor”节点来获取“Histogram_Columnar”蓝图的所有子集实例，然后循环设置他的“Hover”值并执行“Mouse Hover”事件（其实从逻辑上来说并不需要执行这个事件，但是不知道为什么“Hover”变量设置默认值为“Ture”后并没有起到作用）。

F.2.3.b.Time

接下来需要创建一个新的自定义事件“Time”，这是用来为每个数据节点进行事件标注的事件。

首先需要将任意一个“子Actor组件”进行转换后获取到“Histogram_Columnar_Child”子集实例蓝图的所有“Row Index”变量。之后可以通过“Row Index”来获取到“Spline Points”数据表对应行的行名称，最后我们在通过行名称来获取数据表行的内容。

当找到行后，我们将数据表里的时间数据进行拆分，然后将对应的日期数据设置给对应的“文本渲染组件”。

因为“Row Index”变量是会自动更换的，所以咱们没一个数据节点的日期也是动态自动变更的。

F.2.3.c.Time/Name_Show / not show/Rotate

“Time/Name_Show / not show/Rotate”事件是为用户在旋转图表时因为图表展示模式的切换，而对折线标注时间与柱状标注时间进行切换显示的事件。

在创建事件时，需要为事件创建一个浮点输入接口“Show / not show/rotate”，通过这接口获取到Actor的旋转角度。

结合下方的旋转示意图，我们至需要将其分成2个部分“0°至-180°”与“0°至180°”（绿圈部分）。当旋转到“-45°至-135°”与“45°值135°”时我需要让“曲线事件标注”隐藏“柱状时间标注”显示，其他角度反之。

首先我们需要一个“范围内浮点”节点，通过Actor旋转角度判断是否在“0°至-180°”，这样我们就将旋转分成了两个部分。

然后我们在分别创建两个“范围内浮点”并分别设置Min为“-135°”与“135°”Max为“-45°”与“45°”。

最后我们在通过“选择”节点，判断角度位于那个部分，然后进行输入对应的布尔值，用于执行不同的设置。

最后需要对“Numerical line”组件组的数据值标注进行旋转设置，让其一直正对用户。因为我们获取到的Actor旋转并不是“360°”而是2个“180°”，所以我们同样需要一个“范围内浮点”节点对齐区域进行判读然后再执行对应的设置。

而我们要设置“Numerical line”旋转角度为“0°至360°”均为正值，而我们接收到的值是有负值的存在，所以我们需要使用"ABS"绝对节点，将其转换为一个绝对值。然后当角度在“0°至-180°”是，我们将角度专为绝对值后直接设置相对旋转。若果不在“0°值-180°”那需要用180减去绝对值，在用这个值加上180（当角度到180时，如果继续旋转则是从180到0，而我们需要让其继续增量到360，所以我需要先用180减去当前绝对值得到一个增量插值，在这个值加180就是继续做增量从180到360）。

• 旋转示例图

  

  
  

  
  

F.2.3.d.事件Tick

首先创建设置“Angle”变量，供后续事件调用。然后实时执行“Line”函数这只标注线的移动，“Time”与“Time/Name_Show / not show/Rotate”实时设置时间标注与控制显示隐藏，“Sphere Angle”设置“Data Panel”实时面对用户。

下方还有一个“Hover”布尔时间，这个是与鼠标左键事件（旋转Actor）配合使用，当我们鼠标悬停时“Hover”为“True”才可执行鼠标左键事件。

F.2.3.e.鼠标左键

通过鼠标左键事件来控制Actor的旋转。

首先创建一个向量2D变量“Mouse position”，当按下鼠标左键时将获取玩家控制器鼠标位置并创建成向量2D设置给“Mouse position”。之后需要配合“Gate”节点，当按下左键开启，松开左键关闭。当我们按下左键并且鼠标必须在Actor上时开始Tick事件。之后实时循环设置“Histogram_Columnar”所有类的“Left mouse button”变量为“True”，这样当旋转时就会执行“Angle Display”函数（根据角度隐藏或显示模型）。循环完成后，用移动后的用户鼠标位置减去之前的“Mouse position”变量，获得到一个插件，我们可以利用这个插件创建一个旋转体，在用这个旋转体去设置Actor的场景旋转。最后在我们再将移动后的鼠标位置重新设置为“Mouse position”即可得到旋转Actor的功能。在创建旋转体之前我们也可以进行一次乘法运算，来提高旋转的角度倍数。

最后在松开鼠标左键时，我们需要循环设置“Histogram_Columnar”所有类的“Left mouse button”变量为“false”，不让其执行“Angle Display”函数。

F.2.3.f.Color_hover

当用户在图表上进行悬停时，应为用户提供出数据关键点的具体位置，好让用户清除的知道那些地方是可进行操作的。这个事件会分别在“Histogram_Columnar”与“Histogram_Basics”蓝图内分别调用。

首先当用户光标悬停时，有高亮的动画。那么在光标停止悬停时肯定就会有一个反向的动画。所以我们在创建事件时，需要创建一个布尔接口，用来接收”Hover“的参数。通过这个布尔值在集合时间轴节点的从头开始播放与从末尾开始播放来实现次功能。

然后时间轴我们需要分辨创建一个浮点时间轴与颜色时间轴。

在动画开始后我们仅需要执行之前制作的“Child Actor Color”函数并将2个时间轴分别赋予对应的函数接口。最后我们通过浮点值是否等于“1”来控制“Sphere”的显示与隐藏。

F.2.3.g.开始/结束光标悬停

1. Histogram_Basics悬停事件

   

   当用户悬停时首先我们需要循环设置“Histogram_Columnar”类中的“mouse_hover”事件，让其数据加载动画暂停或者播放。然后再来设置“Color Hover”让其播放还是倒退。

   
   

2. Histogram_Columnar悬停事件

   

   同样在用于与“Histogram_Columnar”蓝图交互时，需要循环设置并调用“Color Hover”事件。
   

F.2.3.h.点击时（Plane）

首先我们需要在每个“Histogram_Columnar_Child”子集实例蓝图中创建一个布尔变量“Name Hidden”。通过这边变量控制“Sphere”的交互。

首先我们通过“Flip Flop”切换节点来设置每个“Histogram_Columnar_Child”子集实例蓝图中创建一个布尔变量“Name Hidden”。之后利用切换节点的“Is A”布尔来控制“Name Hidden”函数执行那段程序。从而得到点击“Plane”时让图表隐藏，对应的数据标注颜色变成灰色。

F.2.3.i.用户界面事件

1. rotate_right与rotate_Left

   1.1开启隐藏模型

   

   首先在执行事件时，我们需要将所有的“Histogram_Columnar”类的“Left Mouse Button”变量设置为“Ture”，这样Actor旋转时图表模型则会自动隐藏或显示。

   1.2判断角度

   

   当循环设置完成后。根据“Angle”来判断执行执行那个旋转角度。这里运用到“AND”与“OR”的布尔节点。"AND"节点是两个输入均是“Ture”输出则是“Ture”,如果其中一个是“False”则输出“False”。"OR"节点则是其中任意输入点为“Ture”则输出“Ture”，如果所有输入点为“False”则输出“False”。这里至简单说一下这2个几点，具体详情可以百度下很多详细解释。

   1.3执行动画

   

   首先获取到Actor的当前旋转变换，由此创建一个旋转体变量“Return Value Rotation”（其实这个变量可有可无为了不出问题加了一个）。只有用当前旋转进行插值动画到指定角度。
   

   1.4关闭隐藏模型

   

   动画执行完毕，需要将“Histogram_Columnar”类的“Left Mouse Button”变量设置为“False”。

   
   

2. reset 

   

   “Reset”是用来让图表进行复位的事件。首先需要将所有的“Histogram_Columnar”类的“Left Mouse Button”变量设置为“Ture”，让模型自动根据角度显示。然后执行插值动画，让Actor旋转复位到“0”。动画结束后，因为Tick事件有时会导致标注线无法完全自动复位到初始位置，因为Tick事件并不是帧事件具体的详情请自行百度。所以我们需在要增加一组动画，让标注线在最后自动复位到初始位置。当标注线复位动画完成后，我们还需要将所有的“Histogram_Columnar”类的“Left Mouse Button”变量设置为“false”。

F.3. Histogram_Columnar_Child

“Histogram_Columnar_Child”蓝图是“Histogram_Columnar”的子集实例蓝图。之所以将其单独拿出来说，是因为在这个子集实例蓝图中还需要创建几个事件，而且这些事件是“Histogram_Columnar”、“Histogram_Columnar”与“Histogram_Columnar_Child”相互关联的。

这里的事件主要用于当用户对指定图表交互时，为了减少其他图表的干扰，需要将其他图表进行暂时性的隐藏。之后让数据标注点高亮并且停止数据动画，可以与其进行交互显示标注点的具体数据内容。当用户取消其交互行为时，则会复位并重新开始数据动画。

之前我们一共创建了5个“Histogram_Columnar”子蓝图，我们需要分别为这5个子蓝图编写一下功能功能，功能相同编写一个直接复制就行，唯独需要注意的是子蓝图内的类型转换节点与一些获取的变量节点需要手动调整。

F.3.1. 创建隐藏与显示公共事件

首先我们需要返回到“Histogram_Columnar”主蓝图内。创建一个公共的显示事件“Columnar_Show”。因为咱们有5个数据标注点，还需要创建5个隐藏其他图表显示当前图表并渲染显示数据的事件“Columnar_Hidden”。

F.3.1.a.Columnar_Show

当用户光标离开指向图表时，让其所有图表进行显示。首先获取所有的“Histogram_Basics”循环执行“Mouse Hover Sphere”。当然也可以获取一个类再去执行“Mouse Hover Sphere”，但是这样必须选择在场景内的类。直接索取所有类相对别叫省事但是比较消耗资源，自行根据情况可进行修改。

F.3.1.b.Columnar_Hidden

1. 事件输入

   

   首先需要创建几个输入。

   “Child”用来输入当前子Actor组件。

   "Name"用来输入数据的名称。

   “Y”用来输入子Actor组件的Y轴用于“Data panel”组件组的定位。

   “Name Color”用来输入数据颜色。

   “Data”用来输入数据的具体数值。

   
   

2. 获取Child索引

   

   通过循环获取“Histogram_Basics”蓝图内的“Child”变量，后续可以通过输入接口的“Child”来获取当前“子Actor”的索引，用来“Mouse Hover Sphere”函数判断是否需要进行隐藏。

   
   

3. 获取数据表时间

   

   接下来通过“Row Index”变量来获取每个数据标注点的时间，这个在之前说到过。这里所获取到的时间内容是用来对“Data Panel”组件组内容渲染的。

   
   

4. 时间整数转文本

   

   获取到数据表时间后，需要对整数进行一次文本转换处理，这里需要注意的是“Minimum Integral Digits”，这个是最小整数位。年份我们肯定是4位，月份与日期为了能够有良好的排版我使用了2位。之后将其复制给“Mouse Hover Sphere”函数用于对“Data Panel”组件的文本渲染。

   
   

5. 设置Data Panel位置与是否执行隐藏

   

   最后通过输入接口“Y”获取到“子Actor组件”的Y轴位置并用起设置“Data Panel”的Y轴数值。然后通过数据动画函数中的“Sphere New”获取到第几个“Sphere”的Z轴缩放值，经过乘以200运行后我们就能得到当前“Sphere”的所在Z轴位置，但是我们不能让“Data Panel”与其重叠所以还需进行一次加10的运算。这里我已经知道了所有“Sphere”的X轴的位置所以偷懒直接给了一个数值。最后我们通过“Histogram_Columnar”的“hover”值进行“NOT”以后来控制“Mouse Hover Sphere”函数是否执行隐藏。

   这里为各位补充一下怎么才能让系统自动设置"Data Panel"的X轴与Z轴。各位可以自行尝试。

   首先我们需要在“Histogram_Columnar”子蓝图内将“Sphere”创建为数组，通过命中获取到当前“Sphere”在数组中的索引。

   然后再“Columnar_Hidden”事件创建一个整数输入接口用来传输这个整数。

   之后在“Histogram_Columnar”构建脚本时可以创建一个浮点变量，并将“Spline”的样条长度设置给这个变量。然后我们通过输入的整数索引获取到“Sphere Basice”变量的指定数据。接下来我们将样条长度的变量进行除以“2”的计算。最后我们用“Sphere Basice”变量的指定数据减去样条长度的变量进行除以“2”的数值，这样就能得到没一个“Sphere”的实际X轴位置。最后我们在将输入的整数索引赋予“Sphere_new”这样即可自动获取到指定的Z轴数据。

F.3.2. 为子蓝图创建交互事件

接下来要为每一个“Histogram_Columnar”子蓝图“Histogram_Columnar_Child”创建交互事件。

F.3.2.a.事件开始运行

当每一个“Histogram_Columnar_Child”蓝图开始运行时我们都需要先执行这段内容，用来获取我们所需的数据参数。

1. “Histogram_Columnar_Child”用来获取Y轴位置（非常要注意的是，循环获取的这个“子Actor组件”所调用的子蓝图一定要与当前编译蓝图一致）

2. “Property Name”通过“Histogram_Columnar_Child”在进行类型转换获得到这变量，用来获取数据名称参数（这里的类型转换也要注意一定要转换成与当前编译蓝图一致的类型）

3. “Name Color”用来获取数据图表颜色参数（这里获取是确保图表标注与图表颜色都在使用同一个变量即可）。

F.3.2.b.结束光标悬停时（Sphere）

接下来为”Histogram_Columnar_Child“蓝图里的”Sphere“创建一个结束光标悬停时事件并执行”Columnar_Show“。因为是父级事件，所以直接可以进行调用。这样来一来，用户离开任意一个”Histogram_Columnar_Child“蓝图时，其他蓝图均会显示。

F.3.2.c.开始光标悬停时（Sphere）

最后为每一个”Histogram_Columnar_Child“蓝图的“Sphere”添加开始光标悬停时事件来完成光标悬停时隐藏其他”Histogram_Columnar_Child“并获取数据进行渲染。

首先需要一个布尔变量“Name Hidden”，这个变量在之前的“Histogram_Basics”蓝图中的“点击时（Plane）”又所说道，这里再次重新说明下。当用户点击“Plane”时会将对应的“Histogram_Columnar_Child”蓝图进行隐藏。而为了避免在“Histogram_Columnar_Child”隐藏时还执行显示功能，就需要一个变量来对齐进行判断。“Name Hidden”就是这个判断变量，所以这个变量在我们编写“点击时（Plane）”之前就需要在每一个“Histogram_Columnar_Child”蓝图中提前创建好供其调用。

之后通过“Property Name”将指定的数据表列获取到并转换为数组，然后再通过“Row Index”从数组中查找到所需的数据。之后执行“Columnar Hidden”并将对应参数赋予输入接口。

G.UMG

G.1.Histogram_ui

UMG这里这次没有什么过于复杂的功能，具体怎么使用UE的UMG蓝图可以查看我上期教程，这里就不占用各位时间了。

G.1.1.设计器

注意看下“层级”所应用的组件。

G.1.2.图表

分别为“Button_rest”、“Button_left”、"Button_right"调用“Histogram_Basics”蓝图内的“reset”、“rotate_Left”、“rotate_right”事件。以为所有动画效果均在“Actor蓝图内”，所以"UMG蓝图"无需任何动画仅需调用。

H.总结

这次的重点主要如何将复杂并重复的事件拆分并封装成函数，简化事件的同时可重复调用函数。不同蓝图之间如何调用事件。父子蓝图的使用与功能管理逻辑。数据表数据的获取方式。