Unity 可視化插件XCharts


XCharts簡介

引用插件作者介紹主頁:

一款基於UGUI的功能強大、易用、參數可配置的數據可視化圖表插件。支持折線圖、柱狀圖、餅圖、雷達圖、散點圖、熱力圖等常見圖表。

特性:

  • 內置豐富示例和模板,參數可視化配置,效果實時預覽,純代碼繪制

  • 支持折線圖、柱狀圖、餅圖、雷達圖、散點圖、熱力圖等常見圖表

  • 支持直線圖、曲線圖、面積圖、階梯線圖等折線圖

  • 支持並列柱圖、堆疊柱圖、堆積百分比柱圖、斑馬柱圖等柱狀圖

  • 支持環形圖、玫瑰圖等餅圖

  • 支持折線圖—柱狀圖、散點圖-折線圖等組合圖

  • 支持實線、曲線、階梯線、虛線、點線、點划線、雙點划線等線條

  • 支持自定義主題,內置主題切換

  • 支持自定義圖表內容繪制,提供繪制點、直線、曲線、三角形、四邊形、圓形、環形、扇形、邊框、箭頭等繪圖API

  • 支持PC端和手機端上的數據篩選、視圖縮放、細節展示等交互操作

  • 支持萬級大數據繪制

作者主頁:https://blog.csdn.net/monitor1394/article/details/102762068

插件下載

XCharts 主頁:https://github.com/monitor1394/unity-ugui-XCharts

在插件中包含了配置項手冊、API 以及一些相關問題的問答。

XCharts 使用

打開項目或者導入插件后,可以找到兩個 Demo 場景(需下載包含Demo的資源包),呈現了插件所包含的可視化圖表。

創建圖表

當我們想要使用創建某種圖表時,可以直接在 Hierarchy 窗口中右鍵,在彈出的提示框中選擇 XCharts,便可以從延伸出來的提示框中點擊選擇需要的圖表。

也可以在左上角的工具欄中選擇 XCharts,從延伸出來的列表中點擊選擇需要的圖表。

主要圖表:

LineChart:線狀圖
BarChart:柱狀圖
PieChart:餅狀圖
RadarChart:雷達圖
ScatterChart:散點圖
HeatmapChart:熱力圖
GaugeChart:儀表盤

圖表設置

長寬:

我們可以直接在 Inspector 視圖上通過 Rect Transform 設置整個圖表的大小長寬,也可以在 Scene 窗口中通過拖拽調整。

主題(Theme):

插件本身自帶了三種不同的主題:Default、Light、Dart

而 Theme 屬性的下拉列表中都是圖表中對應的一些顏色屬性,包括所用到的字體(Font)、背景顏色(BackgroundColor)、標題的顏色(TitleColor 和 TitleSubTextColor,設置 UGUI 的兩種不同的文字框)、軸文字的顏色(AxisTextColor)和軸線的顏色(AxisLineColor和AxisSplitLineColor),最后屬性 ColorPalette 是圖表中每組數據一次用到的顏色。

標題(Title):

在該選項中打上對勾,便會在圖表中顯示標題;否則就不會顯示。

其中,文字內容在 Text 或 SubText 中設置;相對應的文字形態設置為 TextStyle或 SubTextStyle,分別包括 Rotate 角度、Offset坐標、Color 顏色、以及字體大小和字體類型等。

提示信息(Tooltip):

在該選項上打上對勾,便會在鼠標移動到相應位置時顯示對應的提示信息;否則便不會顯示。

其中,LineStyle 為提示線的風格設置;TextStyle 為提示文字的風格設置。

數據系列(Series):

這里面是用來處理數據用的,而且大部分的圖表里面的屬性大致相同,只有一些特殊圖表會有一些不一樣的屬性在里面。

  • 其中,Size 表示有幾組數據。在餅狀圖中只需要用到一個;而在線狀圖中則是有幾條線就要有幾個。

  • 然后,每組數據需要注意 Name 這個屬性,及這組數據的名字,這個要在代碼中用到。

  • Label 屬性,是圖表中的文字標簽,就如上圖中,多出來的3個標簽。而標簽的內容則是在 Data 屬性中,每個 Element 中的第一欄數據后面的,第二欄里的內容決定的,剛創建時,可能里面並沒有第二欄,這時只要點擊上面的 Name 按鈕就會出現,或者通過 UpdateDataName 函數,用代碼添加數據的名字。

  • 同時,圖表中的數據設置可以在 Data 屬性中直接設置;也可以通過代碼 AddData 函數,添加數據;或通過代碼 UpdateData 函數,更新數據,其中有很多重載函數,所使用的參數有serieName 就是上面提到的名字(Series名字)、serieIndex 是 Series 的下標索引、dataIndex 是詳細數據的下標索引、value 便是具體的數值等。

  • Animation 屬性,是讓圖表有一個顯示的過程,選中則有,反之亦然。

訪問跳轉:

 

 

 

 

 

*** |  以上內容僅為學習參考、學習筆記使用  | ***


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM