【unity系統模塊開發】UnityEditor工具--數據可視化
在項目的開發過程中有同事做了個可視化工具，看了一下真實高端，就研究了一下並且簡化做了個demo。
所以這其實也不能算原創，更多的代碼是同事寫的，我只能算是介紹了一下代碼邏輯和實現原理。
首先看下效果：
這個是我簡化過的版本，數據是在一定範圍內隨機的，看起來也還可以。
橫軸是時間，縱軸是數量。不同顏色區域代表不同數據。點擊每幀的時候出現每幀具體數據
接下來就是講具體實現.
這裏面有幾部分：
數據收集
數據可視化
點中具體位置時顯示當前位置的具體數據。
1.數據收集
首先這裏的數據收集就看你的需求，是做一個性能檢測工具的話，就收集drawcall信息。做玩家數據分析就收集玩家數據。
在我們這個demo中，可以看到上面每幀中有4組數據（Data1，Data2，Data3，Data4），每個數據類型都是int，可以當做是次數收集。
也就是說，我們每幀去獲取這四個數據，把四個數據放在同一個結構裏，然後這個結構放在一個list裏。
我因為只是做個demo，所以數據就模擬生成了。
可以看到。為了顯示的時候直觀一點，我把隨機區域稍微區分了一下，這樣看起來好看點，像第一個圖那樣。
2.數據可視化
接下來就講一講怎麽把這些數據轉換成圖表。
這裏面可以拆成幾部分來看
xy軸
數據圖
定位線
總數據文本
當前幀數據文本
我們是在OnGUI()裏面去實現畫圖，也就是說，在每個OnGUI的update裏，這5個部分都需要繪制。
接下來就一個個說。
xy軸
xy軸很簡單，就是在固定位置畫兩個帶箭頭的線，帶箭頭的線這個在上篇文章就有給代碼，所以這裏就不多說了。
具體就看上篇文章：http://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
【unity系統模塊開發】UnityEditor工具--數據可視化