189 8069 5689
在Unity做性能优化，或者做一些编辑器工具的时候，如果把收集回来的数据用图表来展示，可以使数据更加直观，如果是性能优化的时候，就能更突显出问题所在。
创新互联公司专注于企业成都全网营销推广、网站重做改版、江州网站定制设计、自适应品牌网站建设、H5页面制作、商城网站建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为江州等各大城市提供网站开发制作服务。在项目的开发过程中有同事做了个可视化工具，看了一下真实高端，就研究了一下并且简化做了个demo。
所以这其实也不能算原创，更多的代码是同事写的，我只能算是介绍了一下代码逻辑和实现原理。
首先看下效果：
这个是我简化过的版本，数据是在一定范围内随机的，看起来也还可以。
横轴是时间，纵轴是数量。不同颜色区域代表不同数据。点击每帧的时候出现每帧具体数据
接下来就是讲具体实现.
这里面有几部分：
数据收集
数据可视化
点中具体位置时显示当前位置的具体数据。
1.数据收集
首先这里的数据收集就看你的需求，是做一个性能检测工具的话，就收集drawcall信息。做玩家数据分析就收集玩家数据。
在我们这个demo中，可以看到上面每帧中有4组数据（Data1，Data2，Data3，Data4），每个数据类型都是int，可以当做是次数收集。
也就是说，我们每帧去获取这四个数据，把四个数据放在同一个结构里，然后这个结构放在一个list里。
我因为只是做个demo，所以数据就模拟生成了。
可以看到。为了显示的时候直观一点，我把随机区域稍微区分了一下，这样看起来好看点，像第一个图那样。
2.数据可视化
接下来就讲一讲怎么把这些数据转换成图表。
这里面可以拆成几部分来看
xy轴
数据图
定位线
总数据文本
当前帧数据文本
我们是在OnGUI()里面去实现画图，也就是说，在每个OnGUI的update里，这5个部分都需要绘制。
接下来就一个个说。
xy轴
xy轴很简单，就是在固定位置画两个带箭头的线，带箭头的线这个在上篇文章就有给代码，所以这里就不多说了。
具体就看上篇文章：https://blog.51cto.com/13638120/2103459
数据图
这部分是整篇文章的重点，因为数据收集只是收集个数记录，要把个数转成图表还是有点麻烦的。
首先基本概念是，既然是画图，就是画三角形，既然是画三角形，就是把坐标信息传到GL.Vertex()里绘制，所以说到底就是把个数转换成坐标，画的是个二维图，所以z轴统一为0.也就是要获取x，y坐标。
画三角形也有有两种方式，TRIANGLES和TRIANGLE_STRIP，这部分前者是每三个坐标画一个三角形，两个三角形要6个坐标。后者是前三个坐标画第一个三角形，第四个坐标和第二三个坐标组成三个坐标，画第二个三角形。
这部分如果不理解的话看下这篇文章：https://blog.csdn.net/onafioo/article/details/39454233
而对于我们来说，我们需要的是做到像上面的图一样，填满图表，所以选择第二种TRIANGLE_STRIP会更会合适且容易实现。比如：
上面标了ABCD四个点，这四个点之间的这片区域就通过这四个点就可以画满，ABC构成第一个三角形，CBD构成第二个三角形。这时只要把ABCD这四个点依次传入就可以了。
所以接下来要解决的就是怎么得出坐标。
先看一下代码：
_graphContentRect是这个绘图框的Rect。
首先，x坐标是很好计算的。算法就是以这个Rect的左边框为第一个点，计算当前点占总共点个数的第几个，再乘以这个Rect的宽，再加上左边的一个点的x坐标得到当前点坐标。
y坐标的计算方法就是，首先需要知道所有点的高值是多少，因为y坐标代表的是个数，这个值是不固定的，所有需要每帧去算大值是多少。然后算法就跟上面算x差不多，算出当前的个数占高值的多少，乘以这个Rect高，用这个Rect高点坐标减去这个坐标活动y坐标。
这样就获得这个点的绘制坐标了。
有了坐标就开始画三角形，按照上面的说法，就是按ABCD坐标顺序把点塞到GL.Vertex()里。
先不看中间的ifelse判断，先省略if的情况。可以看到，比如说画Data1的图（一开始的图的×××部分），就是把当前帧Data1的点，和Data2的点传进去，再传第二帧Data1的点和Data2的点。跟我们上面说的ABCD是一样的。
其他颜色块的画法以此类推。
只不过到最下面的时候，也就是上面的if里面的代码块，y坐标就取y轴的坐标 _graphContentRect.yMax，完成。
到这里就完成了画图了。
现在可以看看效果：
这里会有明显的锯齿，想着优化一下的话，给描个边，消一下锯齿。
这下真的好了~
3.定位线
也就是根据你选择的点，找到那个点的高值坐标，在那个左边的左方向和上下方向画线。
4.总数据文本
比较简单，具体就看代码好了
5.当前帧数据文本
比较简单，具体就看代码好了
第二部分的数据可视化就讲完了~~~
3.点中具体位置时显示当前位置的具体数据。
就是监听一下鼠标点击事件，根据鼠标点中的位置判断距离它最近的坐标，获取数据。
这里就讲完所有的了。
下面提供Demo，还有不懂的可以看代码或者留言交流~
https://pan.baidu.com/s/1w65S-J_qg2_w2CUzuB_B0Q
另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。