XCharts 開源庫介紹

導讀

圖表（Chart）是我們最為廣泛使用的資料視覺化工具。

對於簡單的圖表，Office系軟體就完全可以勝任了。如果需要更加美觀和專業，也可以用ECharts、Highcharts、D3、G2之類專門的工具。在各類程式語言中，也有各種圖形庫用來製作圖表。

那麼今天，我們來介紹一個可以在Unity的UI中繪製圖表的開源庫專案——XCharts。它參考了ECharts的風格，通過UGUI繪製，可以靜態或使用程式碼動態地控制內容。

開源庫連結：https://lab.uwa4d.com/lab/5bc42d5404617c5805d4d685

特性

1、內建豐富示例，引數視覺化配置，效果實時預覽，純原始碼繪製；
2、支援折線圖（LineChart）、柱狀圖（BarChart）、餅圖（PieChart）、雷達圖（RadarChart）；
3、支援Default、Light、Dark三種預設主題切換，自定義主題；
4、支援多資料密集圖表；
5、折線圖通過引數可配置出：折線圖、曲線圖、面積圖等；
6、餅圖通過引數可配置出：餅圖、環形圖、南丁格爾玫瑰圖等。

目前專案仍在不斷更新之中。

使用方法

在開源庫下載好XCharts後，我們可以直接作為Unity專案開啟，也可以將其匯入到現有的專案，然後我們只需要把對應的圖表指令碼新增到一個Canvas的子物件中。

這樣基本的配置就完成了。更加詳細的控制圖表內容以及程式碼使用的方法，可以在專案自帶的演示場景中找到。

那麼既然可以在UI裡動態繪製圖表，我們就來嘗試做一些有意義的事情吧。（以下均使用LowPoly Environment Pack的Demo1場景測試）

1、通過折線圖顯示幀數走勢

幀數計算有多種方法，最簡單的是可以取完成最後一幀的時間的倒數：

fps=1/Time.deltaTime;

但這實際上是用一幀的時間來估計一秒經過的幀數，而且全部顯示出來會有重新整理過快的情況；另一種更常用的方法是統計一下1s左右走過的幀數，如下：

ftime += Time.deltaTime;
frameCount++;
if (ftime >= 1f)
    {
        fps = frameCount / ftime;
        //這裡新增圖表資料控制程式碼
        ftime = 0f;
        frameCount = 0f;
    }

需要新增的圖表程式碼：

chart.AddXAxisData(Time.frameCount.ToString()); //新增橫軸資料，這裡我們使用總幀數
chart.AddData(0, fps);//新增對應資料
chart.RefreshChart();//重新整理圖表

然後我們在Inspector中把折線圖指令碼中的Max Cache Data Number設定為我們希望圖表能夠同時顯示的最大資料量，超過這個值圖表就會進行推移。這樣簡單的幀率折線圖就完成了。

我們可以嘗試隱藏除線條以外的元素，這在Inspector中可以很容易的控制，十分簡潔的幀率走勢就呈現了出來，如下圖：

2、通過折線圖顯示Mono記憶體

Mono記憶體分為兩個部分：已用記憶體(Used)和堆記憶體(Heap)，因為它們特殊的關係，我們可以將他們顯示在同一個折線圖中。要得到這兩個資料，我們可以用使用下面的兩段程式碼：

Profiler.GetMonoHeapSizeLong()
Profiler.GetMonoUsedSizeLong()

與檢視fps相同，我們將其放入Update()裡，並隔1s左右重新整理：

ftime += Time.deltaTime;
if(ftime>=1f)
    { 
        ftime = 0f;
        chart.AddXAxisData(Time.frameCount.ToString());
        chart.AddData("Heap", Profiler.GetMonoHeapSizeLong()/ 1048576f);//堆記憶體 MB
        chart.AddData("Used", Profiler.GetMonoUsedSizeLong()/ 1048576f);//佔用記憶體 MB
        chart.RefreshChart();//重新整理圖表
    }

簡單地樣式調整之後，得到了下面的效果圖，兩條折線可以很清晰地反映出Mono記憶體的變化。

3、通過餅圖顯示材質佔比

統計貼圖個數佔比或者貼圖記憶體佔比會更加具有意義，但在非Editor環境下得到所有可見貼圖並不方便，為了簡單起見，這裡選擇材質個數進行舉例。

以下是部分主要程式碼，通過渲染器查詢到所有可見的材質，使用字典matNames輔助統計：

matNames.Clear();
Renderer[] renderers = (Renderer[])FindObjectsOfType(typeof(Renderer));
foreach (Renderer renderer in renderers) {
    if (renderer.isVisible){
        foreach (Material material in renderer.sharedMaterials){
            if (matNames.ContainsKey(material.name)) {
                int temp = ++matNames[material.name];
                chart.UpdateData(material.name, temp); //圖表會自動計算比例，這裡只統計個數
                }
            else {
                matNames.Add(material.name, 1);
                chart.AddData(material.name, 1);
}}}}

複雜的遍歷工作計算開銷比較大，我們這裡新增協程來延時3s執行。值得注意的是，對於元素減少，即材質不在視野裡的情況，相應的資料列表應該被裁剪，但原始碼中並沒有實現這種功能的方法；我們可以利用該專案純原始碼繪製的優點，自己在series.cs裡新增新的方法：

public void RemoveSerie() => m_Series = new List<Serie>();

這樣每次遍歷之前新增chart.series.RemoveSerie()清空資料列表，達到調整列表大小的作用。

以下是執行效果圖：

簡單的主題修改：

這樣，顯示材質佔比的餅圖也有模有樣了。

打包測試

最後，我們嘗試打包一下，並測試其執行效果：
平臺資訊：Android 8.1，meizu 16th
編者這裡打包遇到了一些問題，檢查發現圖表原始碼有一部分被限定在了Editor環境之中。

不過我們只要見招拆招，刪除這段程式碼及其所有的引用即可，並不影響打包後的正常使用。

下面就是真機的執行效果：

折線圖（FPS）和 餅圖（材質佔比）

折線圖（FPS）和 折線圖（Mono記憶體）

我們想要的圖表這樣就基本完成了。

結語

以上就是本次開源庫介紹的全部內容了，我們通過3個例子演示了使用XCharts在UI中繪製動態圖表的方法；

不管是執行幀率、Mono記憶體還是材質佔比，將資料的動態趨勢顯示出來都具有非常直觀的參考意義。

無論如何，動態圖表是資料視覺化的有效手段，希望這篇文章能對有需要的讀者有所幫助。

快用UWA Lab合輯Mark好專案！

今天的推薦就到這兒啦，或者它可直接使用，或者它需要您的潤色，或者它啟發了您的思路......

請不要吝嗇您的點贊和轉發，讓我們知道我們在做對的事。當然如果您可以留言給出寶貴的意見，我們會越做越好。

---

【博物納新】是UWA旨在為開發者推薦新穎、易用、有趣的開源專案，幫助大家在專案研發之餘發現世界上的熱門專案、前沿技術或者令人驚歎的視覺效果，並探索將其應用到自己專案的可行性。很多時候，我們並不知道自己想要什麼，直到某一天我們遇到了它。

更多精彩內容請關注：lab.uwa4d.com