【Unity 插件推薦】XCharts 圖表設計大師，助你輕鬆掌控數據視覺化！

前言

今天要推薦的是 XCharts，一款專為 Unity 打造的強大圖表提供工具，讓開發者能夠較為簡潔地展示綜合數據，這款插件支援各類圖表，其體驗專為觀看數據提供了極大便利，尤其是在【互動操作】和【玩家反饋】的應對中，XCharts 能夠提供專業程度的圖表效果。

本篇文章將集中介紹 XCharts 3.0 的【基本功能】和【實用方案】，幫助您完全掌握這款圖表工具的力量，將您的遊戲開發提升到更高的水平！不管是需要在遊戲中展示【玩家數據】，或者在編輯工具中直觀呈現【數據分析】，XCharts 都是不可缺少的重要使用工具！

Unity XCharts 插件介紹

遊戲資料的視覺化對現代遊戲開發越來越重要，而 XCharts 就是為了解決這個需求而誕生的！它不僅能幫助你在 Unity 裡快速生成圖表，還支援【實時更新】和【高效分析】，讓複雜的數據處理變得輕而易舉，無論是簡單的【圖表展示】，還是需要結合互動功能的【專業設計】，XCharts 都能提供可靠的解決方案，特別是它強大的自訂功能，讓每個圖表都能精準符合你的設計需求，真正做到既美觀又實用。

功能特色

1. 體驗指向的圖表插件
   支援多種圖表類型，包括【長條圖】 、【圓餅圖 】、【折線圖】等，應對不同場景的數據展示需求。
2. 實時數據操作與分析
   能在大量的【資料分析】和【數據展示】時保持【高效】與【穩定性】，特別適合需要快速反應的應用場景。
3. 體系化配置和充分導向
   支援資料視覺化，開發者可格局化預設並自定義配置項目，顯著提升開發效率。

適用場景

1. 玩家行為數據展示
   解析玩家行為，如【玩家活躍情況】和【系統使用情況】，直觀呈現玩家行為數據，幫助開發者了解玩家需求，進一步優化遊戲設計。
2. 互動使用數據和問答分析
   在【教學】和【問答】類型的遊戲中提供快速的圖表呈現，提升玩家的遊玩體驗。
3. 動態排行榜與競賽數據
   以圖表的方式呈現玩家的【分數】、【排名】和【競賽數據】，特別適合競技類遊戲，增強玩家參與感。

Unity XCharts 最新版本 3.0 發布

插件開發者經過多個月的精心【開發】與【調整】，Unity 圖表外掛 XCharts 3.0 正式發佈！這次的版本可以說是一次里程碑式的升級，插件的開發者用「80 分滿意度」來形容自己對 3.0 版本的肯定，認為這是 XCharts 發展歷程中真正成熟的一步。

Unity XCharts 從起步到重構插件的蛻變歷程

XCharts 的發展可追溯到【XCharts 1.0】和【XCharts 2.0】版本。

在 1.0 發佈時，雖然功能簡單，但作為起步之作，為後續版本的完善奠定了基礎，隨後的 2.0 版本進一步優化功能，但隨著用戶需求的增加，原有框架的不足逐漸顯現，尤其是在【代碼結構設計】和【功能擴展】方面。

這些痛點促使開發者毅然選擇推翻重構，打造了更【完善】、【強大】的 3.0 版本。

Unity XCharts 3.0 的亮點功能

XCharts 3.0 的升級不僅集中在原始碼的重新設計，也在【用戶功能】和【體驗】上進行了大幅提升：

1. 代碼結構重構：更合理的框架設計，方便後續的【維護】和【功能擴展】。
2. 圖表任意組合：內建圖表支援各種組合，滿足不同場景需求。
3. 組件熱插拔：讓插件功能更加靈活，提升開發效率。
4. 新增組件與擴展支持：大幅豐富可用圖表種類。
5. 用戶體驗升級：更注重交互細節，提供全新 Demo 範例。
6. GitHub 社區化維護：開啟 XCharts-Team 功能，集中管理核心及擴展倉庫。
7. 商業模式探索：推出 VIP 訂閱服務，為用戶提供更專業、完善的技術支持，打造更好的使用體驗。

Unity XCharts 3.0 開發過程中碰到哪些問題？

在開發過程中，Unity 的序列化限制對插件造成了一些挑戰，特別是在【泛型序列化】和【遞歸序列化】處理上，這讓 XCharts 3.0版本在開發前期碰到的最大阻力，最直接的影響就兩個。

1. 擴展圖表之間無法任意組合。
2. 遞歸的樹狀結構無法像正常一樣構建。

如在 TreemapChart 矩形樹圖中，就沒法像 ECharts 那樣優雅地配置數據。

雖然 XCharts 3.0 無法完全實現所有圖表的自由組合，但透過對框架的重構，已經成功解決了大多數已知的硬傷，為未來版本奠定了堅實基礎。

Unity XCharts 商業模式與可持續性

作為一款開源插件，XCharts 的開發者深知長期【維護】與【更新】需要穩定的資金支持，因此 3.0 版本開始嘗試引入 VIP 訂閱服務，並以此支持後續【維護】與【開發】，這種模式不僅能保障插件的【持續優化】，也為用戶提供了更高效的【技術支持】。

XCharts 的開發者在原文中也提到，維護這個開源專案耗費了他大量的【時間】和【精力】，從【程式設計】到【框架重構】，再到【功能擴展】，他一直以高標準要求自己，只為提供更優質的工具給其他遊戲開發者。

希望大家能夠【理解】和【支持】他的努力，通過訂閱 VIP 或購買擴展功能來幫助 XCharts 持續發展，這不僅是對插件開發者的肯定，也是對開源社群的一種支持，讓這款優秀的插件能夠走得更遠。

有興趣的朋友可以進一步了解一下這款插件的【訂閱服務】，探索更多高級功能和專屬支持！

Unity XCharts 的未來規劃

隨著元宇宙的快速崛起，【數位化】、【虛擬化】和【視覺化】成為未來網路發展的核心趨勢，XCharts 將以此為契機，積極融入元宇宙工具鏈，為下一代數據視覺化技術提供支持。

未來 XCharts 將專注於三大方向：【大螢幕應用】、【3D 圖表支援】，以及【 AR/VR 技術探索】。針對大螢幕應用，插件將推出更多專為大屏設計的【圖表】和【組件】，滿足【商業展示】與【公共數據視覺化】的需求，同時 XCharts 也在為 3D 和 AR/VR 領域做準備，結合 Unity 的強大功能，探索數據的立體展示與沉浸式互動。

當前的重點仍是持續迭代 XCharts 3.0 版本，提升性能與用戶體驗，並完善【文檔】、【教程】和【範例】，幫助開發者更快上手，並且通過 VIP 訂閱和擴展圖表支持，XCharts 也在探索可持續發展的商業模式，為未來的技術創新奠定基礎。

XCharts 3.0 的推出標誌著插件的一次重大飛躍，未來將在元宇宙的浪潮中，為數據視覺化領域持續貢獻力量。

Unity XCharts 教學：5 分鐘上手 XCharts 3.0

注意：本教學僅適用 XCharts 3.x 版本，2.x 版本請看教學：5 分鐘上手 XCharts 2.0

XCharts 的前提條件

XCharts 是一個 Unity 圖表插件，目前只能在 Unity 平台使用。

使用 XCharts 前，你需要：

• 掌握 Unity 的基本用法。
• 掌握 UGUI 製作 UI 的基本用法。
• 了解 Unity 的 MonoBehavior 腳本用法，知道怎麼【掛腳本】和【用程式碼操作腳本】。

如果你剛接觸 Unity，建議先學習 Unity 相關的基礎教學再使用 XCharts。

XCharts 的獲取和導入

XCharts 主要透過 Github 來維護更新和發布，可以到【Github 主頁】進行下載獲取源碼和 Pacakge；對於無 Github 訪問條件的用戶，可以訪問【國內鏡像】進行下載。國內鏡像的版本更新可能會相對滯後。

XCharts 可透過以下任何一種方式匯入到你的專案：

直接將 XCharts 源碼拷貝到專案

下載好 XCharts 原始碼後，直接將 XCharts 目錄拷貝到 Unity 專案工程的 Assets 目錄下。編譯通過後即可使用。

透過 Import Package 導入 XCharts

下載好 XCharts 的 .unitypackage 檔案後，開啟 Unity，選單列 Assets --> Import Package --> 選取下載好的 .unitypackage 進行導入。導入完成並通過編譯後即可開始使用 XCharts。

透過 Package Manager 導入 XCharts

2018.3 以上的 Unity 版本，可透過 Package Manager 來導入 XCharts，開啟 Package Manager 後，通過 Add package form git URL...，輸入 XCharts 的 GitHub URL:https://github.com/XCharts-Team/XCharts.git 編譯通過後即可使用 XCharts。

對於部分 Unity 版本，也可以直接將 package 加入到 manifest.json 檔案：開啟 Packages 目錄下的 manifest.json 文件，dependencies 在下方加入：

"com.monitor1394.xcharts": " https://github.com/XCharts-Team/XCharts.git",

如需更新 XCharts，刪除 manifest.json 檔案（部分 Unity 版本可能是 packages-lock.json 檔案）的 lock 下的 com.monitor1394.xcharts 相關內容即會重新下載編譯。

建議導入 XCharts 的守護程序

守護程式 XCharts-Daemon 可以確保更新時編譯正常，當本地開啟 TextMeshPro 或 NewInputSystem 時將會非常有用。將 XCharts-Daemon 導入專案後，更新 XCharts 時守護程式會自動依照本地 TMP 等的開啟狀況刷新 XCharts 的 asmdef，確保編譯正常，不用手動去解決，方便 CI/CD 等自動化流程執行。

XCharts-Daemon 的導入方式可以參考剛才的 XCharts 導入方式。到 XCharts-Daemon 的【Github 主頁】獲取原始碼或 Package 的方式導入項目。

XCharts 的基本使用

導入 XCharts 並編譯通過後，Unity 編輯器的選單列會顯示 XCharts，這時可以開始使用 XCharts 了。

提示：Unity 的選單列出現 XCharts 選單時才表示 XCharts 可用。

新增一個簡單圖表

在 Hierarchy 視圖下右鍵 UI->XCharts->LineChart 或功能表列 XCharts 下拉選擇 LineChart，即可快速建立預設的折線圖：

如需在某個節點下方建立圖表，可以選取節點右鍵 UI->XCharts->LineChart 即可在節點下方建立圖表。

修改圖表數據修改圖表數據

剛建立的圖表，它的資料可以在 Inspector 視圖面板上進行修改。

對於 X 軸數據，可通過：XAxis->Data 展開後進行增刪和修改：

對於 Serie 數據，可透過：Serie->Data 展開後進行增刪和修改：

Serie 支援多維數據，一般折線圖只用到二維資料：第一維表示 X 軸類目資料的編號，第二維表示對應的數值。

添加多個 Seire

在 Inspector 視圖，找到 LineChart 的面板，透過 Add Serie 按鈕，可以新增第二條 Line 折線：

提示：Serie 透過 Add Serie 按鈕新增。可新增不同類型的 Serie。可以到官方文檔查看 XCharts 有哪些 Serie？

新增其他主組件

預設圖表沒有 Legend，需要 Legend 組件可透過 Add Component 按鈕新增：

提示：主組件透過 Add Component 按鈕添加。可以到官方文檔查看 XCharts 有哪些主組件？

新增 Serie 組件

Serie 只自備了幾個常見的組件，其他組件用到時需額外添加。例如，需要為折線圖進行區域填滿顏色，可單獨給予新增 Serie 組件 AreaStyle：

提示：Serie 組件透過 Serie 右邊的按鈕添加。可以到官方文檔查看 XCharts 有哪些 Serie 組件？

新增 SerieData 元件

如果需要個性化自訂每個資料項的配置，可以單獨給每個 SerieData 新增組件。例如我們給折線圖的第二個數據單獨顯示 Label：

提示：SerieData 元件透過展開 SerieData 後 Component 右邊的按鈕加入。可以到官方文檔查看 XCharts 有哪些 SerieData 組件？

更多組件和配置參數

XCharts 經過不斷的迭代優化，目前已有多達數十種的主組件和子組件，每個組件有幾個到幾十個的可配置參數，用來支援多樣化的功能。

首次使用 XCharts，建議親自去測試下各個圖表各個組件的實際效果。Inspector 視圖可以直接新增各種圖表，各種元件以及調整各個配置參數，Game 視圖會即時回饋調整後的效果。各個組件的詳細參數說明可查閱 XCharts 配置項手冊。

如何快速調整參數

XCharts 是數據和參數驅動的。想要什麼效果，只需要去調整對應元件下的設定參數就可以，不能去改 Hierarchy視圖下的節點，因為那些節點是由 XCharts 內部根據配置和資料產生的，即使改了也會在刷新時被還原掉。

如何快速定位你想要改的效果所對應的組件，這就需要對組件有一定的了解。例如我們想要讓 X 軸的軸線末端顯示箭頭，如何定位？第一步，X 軸定位到 XAxis0；第二步，軸線定位到 AxisLine；最後，再去看 AxisLine 組件下有沒有這樣的參數可以實現這個效果，對於不太確定的參數可以查閱 XCharts 配置項手冊。

XCharts 提供從全域 Theme、系列 Serie、單一資料項目 SerieData 三方面全方位的參數配置。優先權由大到小為：SerieData → Serie → Theme。以 ItemStyle  的顏色為例：

1. 如果 SerieData 的 ItemStyle 配置有非 0000 顏色值，則優先使用這個顏色值。
2. 如果 Serie 的 ItemStyle 配置有非 0000 顏色值，則優先使用這個顏色值。
3. 否則顏色值取自主題 Theme 的 Color Palette。

提示：通常顏色值為 0000 時表示以主題預設顏色；其他參數為 0 或 null 時表示以主題預設配置；設定顏色時要注意透明度。

用代碼添加折線圖

給 gameObject 掛上 LineChart 腳本：

var chart = gameObject.GetComponent<LineChart>();

if (chart == null)

{

chart = gameObject.AddComponent<LineChart>();

chart.Init();

}

調整大小：

chart.SetSize(580, 300);//代碼動態設置尺寸，或直接操作chart.rectTransform，或直接在Inspector上改

設定標題：

var title = chart.EnsureChartComponent<Title>();

title.text = "Simple Line";

設定提示框和圖例是否顯示：

var tooltip = chart.EnsureChartComponent<Tooltip>();

tooltip.show = true;

var legend = chart.EnsureChartComponent<Legend>();

legend.show = false;

設定坐標軸：

var xAxis = chart.EnsureChartComponent<XAxis>();

xAxis.splitNumber = 10;

xAxis.boundaryGap = true;

xAxis.type =  Axis.AxisType.Category;

var yAxis = chart.EnsureChartComponent<YAxis>();

yAxis.type =  Axis.AxisType.Value;

清空所有預設資料（包含 Serie），新增 Line 類型的 Serie 用於接收資料：

chart.RemoveData();

chart.AddSerie<Line>("line");

如果 Serie 是固定的，建議只是清空數據，不用把 Serie 也清除：

chart.ClearData();

這樣可以提前在 UI 上設定好 Serie 的設定參數。

新增 10 個數據：

for (int i = 0; i < 10; i++)

{

   chart.AddXAxisData("x" + i);

   chart.AddData(0, Random.Range(10, 20));

}
 

這樣一個簡單的折線圖就出來了：

如果一個 Chart 裡面有多個系列時，則 Axis 的 data 只需要加一次，不要多個循環加重複了。

危險：請確保 Axis 的資料個數和 Serie 的資料個數一致。

完整程式碼請查閱 Examples：Example13_LineSimple.cs

你也可以用程式碼控制更多的參數，Examples 下方還有更多的其他例子，凡是 Inspecto 上看到的可設定的參數，都可以透過程式碼來設定。XCharts 配置項手冊裡面的所有參數都是可以透過程式碼控制的。

設定預設字體

XCharts 預設使用的是 Unity 預設字體 Arial，在 WebGL平台上可能無法顯示中文。在將 XCharts 用在你的專案時，建議先設定好字體：

• 找到 XCharts/Resources/XCSetting.asset 資源，修改裡面的 Font 並保存。
• 找到 XCharts/Resources/XCTheme-Default.asset 和 XCharts/Resources/XCTheme-Default.asset 兩個字體配置，點擊 Sync Font from Setting 和 Sync Font to Sub Theme 按鈕將字體同步到主題配置檔案上。

字體設定好後，新建立的圖表就會用新設定的字體了。對於舊圖表，可以點擊 Rebuild Chart Object 進行刷新。

注意：使用 XCharts 前建議先設定好字體；更新 XCharts 時注意設定的字體可能被還原的問題。

使用 TextMeshPro

XCharts 支援 TextMeshPro，但預設是不開啟的，需要自己手動切換。可透過以下方式開啟和關閉：

開啟後需要設定好 TextMeshPro 要用的全域字體，也可以在主題 Theme 單獨設定：

建議在專案初就規劃好是否要使用 TextMeshPro，並設定好字型。在已有很多圖表的情況下切換 TMP 時，可能某些圖表無法自動刷新，可以手動點擊 Rebuild Chart Object 按鈕來重建圖表，即可正常初始化。

開啟了 TMP 專案在更新 XCharts 時，可能會碰到遺失了 TMP 引用而無法編譯通過的問題，可透過以下兩種方式解決：

1. 找到 XCharts.Runtime.asmdef 和 XCharts.Editor.asmdef，手動加上 TextMeshPro 的引用
2. 移除 PlayerSetting 中 Scripting Define Symbols 的 dUI_TextMeshPro 宏

3.8.0 版本後增加 XCharts-Daemon 守護程序，將 XCharts-Daemon 導入專案後，在更新 XCharts 時守護程式會自動根據本地開啟的 TMP 情況刷新 asmdef，確保編譯正常。

XCharts 的程式碼控制

Inspector 上看到的所有參數都可以用程式碼來修改，關鍵是要定位你要改的參數是在元件上、還是 Serie 上、還是在具體的資料項 SerieData 上。

另外，除非定制，建議調用 Chart 下提供的 public 接口，特別是數據相關和列表的操作。這些介面內部會做一些關聯處理，例如刷新圖表等。常見的接口有：

1. chart.ClearData()：清空圖表資料（不移除 Series）
2. chart.RemoveData()：清除圖表資料（會移除所有 Seri​​e）
3. chart.AddSerie()：新增 Serie
4. chart.AddXAxisData()：新增 X 軸數據
5. chart.AddData()：新增 Serie 數據
6. chart.UpdateData()：更新 Serie 數據
7. chart.UpdateXAxisData()：更新 X 軸數據
8. chart.UpdateDataName()：更新 Serie 資料的名字

XCharts 內部有自動刷新機制，但也是在一定條件才會觸發。如果自己呼叫了內部元件的接口，碰到元件沒有刷新，確實找不到原因的話，可以用以下兩個接口強制刷新：

1. chart.RefreshAllComponent()：刷新圖表元件，會重新初始化所有元件，不建議頻繁待用。
2. chart.RefreshChart()：刷新圖表繪製，只刷新繪製部分，不會刷新組件文本，位置等部分。
3. 各個組件也可以透過 SetAllDirty() 只刷新自己。

危險：用 API 去操作資料和各種 list，而不是直接存取 list 處理。

改主組件上的參數

需要先取得組件，再修改裡面的參數：

var title = chart.EnsureChartComponent<Title>();

title.text = "Simple LineChart";

title.subText = "normal line";

var xAxis = chart.EnsureChartComponent<XAxis>();

xAxis.splitNumber = 10;

xAxis.boundaryGap = true;

xAxis.type = Axis.AxisType.Category;

備註：低版本沒有 EnsureChartComponent() 介面時，用 GetOrAddChartComponent()。

改 Serie 的參數

對於新新增的 Serie：

var serie = chart.AddSerie<Pie>();

serie.center[0] = 0.5f;

serie.center[1] = 0.5f;

serie.radius[0] = 80;

serie.radius[1] = 90;

serie.animation.dataChangeEnable = true;

serie.roundCap = true;
 

對於已存在的 Serie：

var serie = chart.GetSerie<Pie>();

serie.center[0] = 0.5f;

serie.center[1] = 0.5f;

serie.radius[0] = 80;

serie.radius[1] = 90;

serie.animation.dataChangeEnable = true;

serie.roundCap = true;

為 Serie 新增額外元件：

serie.EnsureComponent<AreaStyle>();

var label = serie1.EnsureComponent<LabelStyle>();

label.offset = new Vector3(0,20,0);

改資料項 SerieData 上的參數

var serieData = chart.AddData(0, 20);

//var serieData = serie.GetSerieData(0); //從已有數據中獲取

serieData.radius = 10;

var itemStyle = serieData.EnsureComponent<ItemStyle>(); //給數據項添加ItemStyle組件

Unity XCharts 實例演示

建立一個預設的折線圖

在 Hierarchy 視圖下右鍵選擇 XCharts -> LineChart，即可建立預設的折線圖。

效果如下。

代碼修改顯示的值

實際上使用我們肯定不會透過修改面板的值去修改圖表訊息，而是透過程式碼。

新增 Test 代碼，如果有多條折線數據，繼續增加即可。

using UnityEngine;

using XCharts.Runtime;

public class Test : MonoBehaviour

{

   private void Start() {

       LineChart chart = GetComponent<LineChart>();

       //添加之前先清除默認的表的數據

       chart.RemoveData();

       //添加X軸數據

       int[] xData = { 1, 2, 3, 4, 5 };

       foreach (int i in xData)

       {

           chart.AddXAxisData(i.ToString());

       }

       //填充數據1

       string name1 = "test1";

       int[] data1 = { 10, 20, 30, 10, 50 };

       //創建該數據表

       chart.AddSerie<Line>(name1);

       //添加數據

       foreach (int i in data1)

       {

           chart.AddData(name1, i);

       }

       //填充數據2

       string name2 = "test2";

       int[] data2 = { 5, 25, 35, 5, 10 };

       //創建該數據表

       chart.AddSerie<Line>(name2);

       //添加數據

       foreach (int i in data2)

       {

           chart.AddData(name2, i);

       }

   }

}
 

運行效果如下。

Unity XCharts 相關介紹 & 教學影片

Unity XCharts 圖表設計大師相關網站 & 插件下載點

【XCharts】

官方網站：XCharts

官方文檔：XCharts

訂閱服務：XCharts

配置項手冊：XCharts

GitHub 下載連結：XCharts

Gitee 下載連結：XCharts

GitHub 下載連結：XCharts-Daemon

Gitee 下載連結：XCharts-Daemon

GitHub 官方文檔：教學：5 分鐘上手 XCharts 2.0

————————————————

以上內容改編節錄自 ：

CSDN 作者：小莫M

CSDN 作者：向宇it

更多好用插件：【Unity 好用插件推薦】持續更新，一起讓遊戲開發事半功倍！

本文原創(或整理)於亞洲電玩通，未經作者與本站同意不得隨意引用、轉載、改編或截錄。

特約作家簡介

X

A

Y

B

JamXu

十年遊戲研發

二十年遊戲台主

三十年遊戲玩家

經中華網龍遊戲企劃進入遊戲圈，然後被雷打到去學程式前後端又學了點設計再帶帶幾個研發團隊，見證了 3D 渲染技術及遊戲引擎互相進步，也見證了研發代理的更迭與博弈遊戲的興起，再毅然研究起 SEO 網路行銷與社群廣告投放，深信自研自賣才是最大贏家，期望能為台灣研發重回輝煌時光貢獻一點力量。如果你也有遊戲夢，歡迎交流認識。

支持贊助 / DONATE

亞洲電玩通只是很小的力量，但仍希望為復甦台灣遊戲研發貢獻一點動能，如果您喜歡亞洲電玩通的文章，或是覺得它們對您有幫助，歡迎給予一些支持鼓勵，不論是按讚追蹤或是贊助，讓亞洲電玩通持續產出，感謝。

BTC

352Bw8r46rfXv6jno8qt9Bc3xx6ptTcPze

ETH

0x795442E321a953363a442C76d39f3fbf9b6bC666

TRON

TCNcVmin18LbnXfdWZsY5pzcFvYe1MoD6f

▲