推薦閱讀
CSDN主頁
GitHub開源地址
Unity3D插件分享
簡書地址
我的個人博客
QQ群：1040082875
一、前言
用Unity做虛擬仿真項目，總會遇到要畫圖表的需求，如果從頭開發，那么工作量是很大的。
有這么一款插件，就免去了我們重復造輪子的工作，那就是XCharts插件。
XCharts插件是一款基于Unity3D的UGUI系統的插件，可以繪制折線圖、曲線圖、餅狀圖、雷達圖、散點圖、熱力圖等等，功能強大，但是參數超多 - -，下面就來學習一下這個插件的使用吧。
二、原文
插件的Github地址：XCharts主頁
常見問題：XCharts問答
插件下載：unitypackage包下載
接口文檔：API手冊
參數配置：參數配置手冊
新手教程：5分鐘上手XCharts
三、快速入門
3-1、首先下載安裝包unitypackage包下載
XChartsDemo 是示例Demo，推薦導入，可以查看各類圖表的效果
3-2、將資源包導入到Unity中
3-3、Demo中有各種圖表的效果，如下圖所示：
3-4、搭建簡單場景
在Hierarchy視圖下，先選中Canvas，然后選擇Create→XCharts->LineChart：
注意，Chart需要建在Canvas層級下面，因為這個圖標是以UGUI為基礎的。
LineChart：折線圖
BarChart：柱狀圖
PieChart：餅圖
RadarChart：雷達圖
ScatterChart：散點圖
HeatmapChart：熱力圖
GaugeChart：儀表盤
RingChart：趨勢圖
PolarChart：極區圖
LiquidChart：液位圖
5、一個簡單的折線圖就出來了
6、在Inspector視圖可以查看調整各個組件的參數，Game 視圖會實時反饋調整的效果。
*注意：不同版本之間可能界面有些區別，但是功能都差不多的
這個是新版本的界面：
3-5、 修改參數
將x軸和y軸的值進行修改：
修改x軸的值：
y軸的值修改在：Series→Serie0→Data：
比如：
如果想要都顯示整數：
設置YAxis 0→Interval：
設置為1即可。
這個在Inspector面板修改屬性，在Game 和Scene視圖都是實時顯示的，不用運行程序
四、使用代碼構建圖表
4-1、代碼
using System.Collections.Generic; using UnityEngine; using XCharts; public class XchartsDemo : MonoBehaviour { public GameObject chart; void Start() { CreateChart(); } //創建圖表 private void CreateChart() { List xAxisValue = new List(); xAxisValue.Add("周一"); xAxisValue.Add("周二"); xAxisValue.Add("周三"); xAxisValue.Add("周四"); xAxisValue.Add("周五"); List yAxisValue = new List(); yAxisValue.Add(8); yAxisValue.Add(7); yAxisValue.Add(5); yAxisValue.Add(7); yAxisValue.Add(8); CreateChart(chart, "折線圖", "星期數", "工作時間", SerieType.Line, LineType.Normal, xAxisValue, yAxisValue); } /// /// 生成圖表 /// /// 圖表組件 /// 圖表表頭 /// 坐標軸是否留白 /// x軸的軸名 /// y軸的軸名 /// 設置是什么類型圖表 /// 什么類型線段 /// x軸的值 /// y軸的值 public void CreateChart(GameObject _chart, string _title, string xAxisName, string yAxisName, SerieType _serietype, LineType _linetype, List xAxisValue, List yAxisValue) { var chart = _chart.GetComponent(); //表頭設置 chart.title.show = true; chart.title.text = _title; //背景圖 chart.background.gameObject.SetActive(chart.background.show); //提示框 chart.tooltip.show = true; chart.tooltip.titleFormatter = " "; //圖例組件 chart.legend.show = false; //x軸的設置 chart.xAxis0.show = true; chart.xAxis0.type = Axis.AxisType.Category; chart.xAxis0.splitNumber = 11; chart.xAxis0.boundaryGap = false; chart.xAxis0.axisName.show = true; chart.xAxis0.axisName.name = xAxisName; chart.xAxis1.show = false; //y軸的設置 chart.yAxis0.show = true; chart.yAxis0.type = Axis.AxisType.Value; chart.yAxis0.show = true; chart.yAxis0.splitNumber = 10; chart.yAxis0.interval = 1; chart.yAxis0.axisLabel.show = true; chart.yAxis0.axisName.show = true; chart.yAxis0.axisName.name = yAxisName; chart.yAxis1.show = false; //標記的圖形 SerieSymbol sy = new SerieSymbol(); sy.show = true; sy.type = SerieSymbolType.Circle; sy.gap = 2; sy.sizeType = SerieSymbolSizeType.Custom; sy.size = 7; //線段的樣式設置 LineStyle ls = new LineStyle(); ls.show = true; ls.type = LineStyle.Type.Solid; ls.toColor = new Color32(18, 240, 111, 255); ls.toColor2 = new Color32(244, 29, 140, 255); ls.width = 2.5f; //圖表上的文本標簽的樣式 SerieLabel sl = new SerieLabel(); sl.show = true; sl.position = SerieLabel.Position.Outside; sl.offset = new Vector3(0, 20, 0); sl.lineWidth = 25; //圖表動畫 SerieAnimation sa = new SerieAnimation(); sa.enable = true; //y軸的值的設置 chart.series.list[0].animation = sa; chart.series.list[0].label = sl; chart.series.list[0].lineStyle = ls; chart.series.list[0].symbol = sy; chart.series.list[0].name = ""; chart.series.list[0].lineType = _linetype; //清空值 chart.RemoveData(); chart.AddSerie(_serietype); //添加x軸的值 for (int i = 0; i < xAxisValue.Count; i++) { chart.AddXAxisData(xAxisValue[i]); } //添加y軸的值 foreach (float item in yAxisValue) { chart.AddData(0, item); } } }
4-2、效果圖
五、后言
真正的運用到項目中，還需要大家自己多摸索了。
unity
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
