XCharts開源庫介紹

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

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

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

那麼今天，我們來介紹乙個可以在unity的ui中繪製圖表的開源庫專案——xcharts。它參考了echarts的風格，通過ugui繪製，可以靜態或使用**動態地控制內容。

1、內建豐富示例，引數視覺化配置，效果實時預覽，純原始碼繪製；

2、支援折線圖（linechart）、柱狀圖（barchart）、餅圖（piechart）、雷達圖（radarchart）；

3、支援default、light、dark三種預設主題切換，自定義主題；

4、支援多資料密集圖表；

5、折線圖通過引數可配置出：折線圖、曲線圖、面積圖等；

6、餅圖通過引數可配置出：餅圖、環形圖、南丁格爾玫瑰圖等。

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

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

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

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

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

fps=1/time.deltatime;

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

ftime += time.deltatime;
framecount++;
if (ftime >= 1f)

需要新增的圖表**：

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)

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

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

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

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

matnames.clear();
renderer renderers = (renderer)findobjectsoftype(typeof(renderer));
foreach (renderer renderer in renderers) 
else }}}

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

public void removeserie() => m_series = new list();

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

以下是執行效果圖：

簡單的主題修改：

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

最後，我們嘗試打包一下，並測試其執行效果：

平台資訊：android 8.1，meizu 16th

編者這裡打包遇到了一些問題，檢查發現圖表源**有一部分被限定在了editor環境之中。

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

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

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

折線圖（fps）和折線圖（mono記憶體）

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

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

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

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

快用uwa lab合輯mark好專案！

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

XCharts開源庫介紹

friso開源庫介紹

訊號處理開源庫SP 介紹

C 開源資料庫介紹

XCharts開源庫介紹

friso開源庫介紹

訊號處理開源庫SP 介紹

C 開源資料庫介紹

相關推薦