charts混合使用 elementui和e_【UE4】UI——创建多种常见大数据可视化Charts图表【上篇】...
【前言】
我们之前在Blender当中盖大楼的时候可以用Curve Modifier来创建不同的大楼形状（如圆柱/三棱柱/四棱柱/五棱柱等等）
X Tesla：【Blender】如何用 8 种 Modifier 快速制作各种摩天大楼（建模提升工作效率必看！）zhuanlan.zhihu.com
那么我相信我们UE4当中的UI多边形UI肯定也可以的，各种数据图UE4肯定也能搞（下篇会着重讲到）。于是研究学习了一下就有了本篇。
另：E-Charts官方提供了很多精美的Web端的数据可视化UI方案，我们以后会配合Html+JS+Css来跟我们的UE4 UI完美地结合起来。
Examples - Apache ECharts (incubating)echarts.apache.org【导图】
一、雷达扫描图
【1.1】制作基础圆圈轮廓
【1.2】设置雷达图
一定要记得MakeFloat3要全部连上（否则你如果只连了两个的话，就只有两种原色混合了，例如，没有X，即没有R，也就是红色的雷达圈是出不来的呢。
【1.2.1】注意用Floor取整
【1.3】设置顺时针旋转还是逆时针旋转（Rotator Time Custom UV）
设置Customized UV数量，将0变为1，如果你将Rotator旋转连至Custom UV 0后发现结果是一片漆黑，什么都没有，那么你可以将数量改为2，连到Customized UV1上就可以了
【1.4】抠除黑色背景
【1.5】创建实例 调节参数测试
二、柱状图 Histogram
这里官方商城有个免费插件 Kantan Charts。这个还是插件，不过我还没测试过。感觉代码啥的都不是自己的，所以还是强迫自己重头做一个，用引擎本身自带的特性实现这些功能，不去写拓展C++代码看看可不可以。
在Code Plugins中由Kantan Dev创建的Kantan Chartswww.unrealengine.com那就还是在UI当中Draw Box了。
【2.1】UI Override Function——On Paint 在UI中画图
【2.1.1】创建进入On Paint 函数
【注意事项】
- 变量的话用本地变量（Local Variables，它只在Functions函数内显示），不要用全局变量（Variables/Global Variables），要不然它会报错说违反了它的条件——在On Paint函数内，全局变量只是可读，而不是可编辑的。所以值不能够被更改。而且On Paint是每一帧去执行的。
那么有小朋友就要问了，为什么不能把它们单独抽离出来，放在UI的事件图表当中（你看Draw Box、Draw Line的啥都有），而且也可以更改变量的值呢。
那是因为这个老大Paint Context 在事件图表中没有地位啊。人家是引擎根里面负载的函数。（我们的Draw Box只能在这里面搞）
2.Override里面的函数是可以直接执行的，类似我们的UI元素文字数据绑定一样。它跟Construction Script也类似，是不需要播放就可以直接运行的。
【2.1.2】填写蓝图
下面这个蓝图肝了好长时间~
然后这个是从最顶上生成的，我尝试将它旋转180度。但是文字却是反着来的（视频见下方）（不过我又需要在On Paint当中For Loop随着每一帧同时更改相关值和文字显示，而且Paint Context又不能Split/Break，又不能设置全局变量）
后面又尝试分开。
注意是先旋转180度，然后再Flip翻转。（设置Render Pivot不管用）
【2.1.3】限定FPS最大值为1以让直方图的更新速度变缓（不推荐，这样会同时让编辑器蓝图编辑也会变慢，一卡一卡的，昨天没测试到~)
这里想用Random Float简化测试还不行，只要用到Random Float的话，那么它就会来回地闪，真是瞎了我的眼。
不好意思了，这里别无他法，所以我用了一个超级贱超级蠢的方法（不推荐使用），就是直接限定FPS的最大值。要不然我的Random float闪得太快了呢。（On Paint可以很明显地看到，它是每一帧去执行的。）
t.maxFPS限定FPS的最大值为1 (去掉这些显示的话，一模一样输入一遍就好了）
【2.1.4】升级版（试行）（待解决）
【2.1.4.1】Timeline——让直方图数据值平缓过渡
然后如果要制作动态效果的话呢，就需要添加Timeline了呢。（可行，但是比较麻烦，所以没做演示）
由于UI中没有Timeline，我们就转换战场，到Level BP当中添加Timeline设置值，那么就需要将哪些Random Float逐个提升为变量设置Timeline了。（Actor Construction Script当中又没有Timeline，另外，OnPaint其实就类似Construction Script）
另外的就是直接用Actor BP Construction Script 拉Cube制作（这个比较简单了，不过是三维的，这个是二维的）
【2.1.4.2】Delay——简化2.3 的FPS设置问题，设置多长时间后更新一次直方图。
就是将For Loop With Break宏复制一份，然后添加Delay节点。多长时间更新一次直方图。
我尝试过Delay，但是On Paint负载函数用不了包括：（连搜都搜不到）
- UI自创建的Macro（内含Delay）
- 外边新创建的Macro（Parent Class=Object）
所以就很纳闷了。只能索性设置最大FPS了。
【2.1.5】最终效果
【2.1.6】其他尝试（Deprecated）
将它们（直方图和文字单独分开创建UI），以让文字不跟着旋转翻转。
然后将直方图OnPaint函数用到的变量跟文字的进行绑定。（关卡蓝图当中和UI蓝图当中都试过了，但是最终就是不能够同步，文字和直方图是对应不上的，忽高忽低）
【2.2】HUD Event Recieve Draw函数画法（这个文字和柱状图都正确了呢）
【HUD简介】
HUD——Head Up Display。抬头显示简称（飞机/汽车等的仪表盘这些）
在游戏上就是直接绘制在我们的屏幕上（不像Widget还需要添加Add To Viewport），这个是直接通过函数写画的。（也没有UI的Designer）
【2.2.1】新创建一个HUD BP
【2.2.2】填写以下蓝图
- Event Recieve Draw HUD函数就类似于On Paint函数
- 记得用float to text（float）来精确我们的小数有效位数
【2.2.3】别忘了将新创建的BP_HUD 给到GameMode上面。
【2.2.4】最终测试效果（解决了UI On Paint的文字颠倒问题）
三、Draw Line 添加文字画线指示条
一般三维场景，如地图、地标等会常常用到。
【3.1】新建一个Widget UI，填写以下蓝图（左边Functions Override 选择On Paint覆载函数）
【3.2】创建Grid Panel 设置调节参数的UI
添加Slider和Text(或者用Spin Box也可以，数据有能够直接显示出来，设置个Tool Tip Text标记为什么数据即可）
【3.3】将文字和值绑定起来（复制两份给另两个绑定，并给上相应的变量和string）
【3.4】UI事件蓝图当中绑定滑条值
【3.5】关卡蓝图当中添加UI并设置初始点位置
【3.6】测试结果
其实这样做线条也有自动 Find Look at Rotation 的效果呢。
四、关于大数据实时导入UE4并更改UI相关文字或图表数据显示：
这就涉及到了什么Json字符串，游戏网络信息传输相关的知识了，什么服务器啦等等，这块暂时没怎么搞过。
先挂上个链接，以后需要了再研究。这个视频是更改外部文件的值来变动UI数据显示的。
https://www.youtube.com/watch?v=zuJ2tjZW770www.youtube.com相关的还有CSV文件和UE4 的Data Table。
https://www.youtube.com/watch?v=nMy6H1o1zO0www.youtube.com------------------------------------------------------------------------------
以上就是UE4的 UI大数据可视化 相关
上篇了
如有错误请指正~
（这篇太肝了，下篇更烧脑）