摘要：圖表（Chart）是我們最爲廣泛使用的數據可視化工具。以上就是本次開源庫介紹的全部內容了，我們通過3個例子演示了使用XCharts在UI中繪製動態圖表的方法。

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

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

導讀

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的子對象中。

XCharts開源庫介紹

XCharts開源庫介紹

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

那麼既然可以在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設置爲我們希望圖表能夠同時顯示的最大數據量，超過這個值圖表就會進行推移。這樣簡單的幀率折線圖就完成了。

XCharts開源庫介紹

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

XCharts開源庫介紹

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內存的變化。

XCharts開源庫介紹

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()清空數據列表，達到調整列表大小的作用。

以下是運行效果圖：

XCharts開源庫介紹

簡單的主題修改：

XCharts開源庫介紹

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

打包測試

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

平臺信息：Android 8.1，meizu 16th

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

XCharts開源庫介紹

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

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

XCharts開源庫介紹

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

XCharts開源庫介紹

折線圖（FPS）和 折線圖（Mono內存）

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

結語

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

不管是運行幀率、Mono內存還是材質佔比，將數據的動態趨勢顯示出來都具有非常直觀的參考意義。

XCharts開源庫介紹

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

快用UWA Lab合輯Mark好項目！

XCharts開源庫介紹

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

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

相關文章