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 屬性,是讓圖表有一個顯示的過程,選中則有,反之亦然。
訪問跳轉:
*** | 以上內容僅為學習參考、學習筆記使用 | ***