Using unity to do simulation, I don't allow this chart plug-in, you don't know

Recommended reading

• CSDN Home page

• GitHub Open source address

• Unity3D Plug in sharing

• Jane book address

• My personal blog

• QQ Group ：1040082875

One 、 Preface

use Unity Do virtual simulation projects , There will always be a need to draw charts , If you develop from scratch , So the workload is huge .

There is such a plug-in , It eliminates the need for us to repeat the work of building wheels , That's it XCharts plug-in unit .

XCharts The plug-in is based on Unity3D Of UGUI System plug-ins , You can draw a line chart 、 diagram 、 The pie chart 、 Radar map 、 Scatter plot 、 Thermodynamic diagram, etc , Powerful , But there are too many parameters  - -, Let's learn how to use this plug-in .

Two 、 original text

Link to the original text ：https://blog.csdn.net/monitor1394/article/details/102762068 The plug-in that the boss spent more than a year developing , It's so strong , But what I admire most is not his skill , But he can get up earlier and go to bed later , Ha ha ha

• The plug-in Github Address ：
  XCharts Home page

• common problem ：
  XCharts Question and answer

• Plugin Download ：
  unitypackage Package download

• Interface document ：
  API manual

• Parameter configuration ：
  Parameter configuration manual

• Novice tutorial ：
  5 Minutes to go XCharts

3、 ... and 、 Quick start

3-1、 First download the installation package

unitypackage Package download

XChartsDemo  It's an example Demo, It is recommended to import , You can view the effects of various charts

3-2、 Import resource packs into Unity in

3-3、Demo There are various chart effects in , As shown in the figure below ：

3-4、 Build a simple scene

stay Hierarchy Under View , Select first Canvas, And then choose Create→XCharts->LineChart： Be careful ,Chart Need to be built on Canvas Below the hierarchy , Because this icon is based on UGUI On the basis of .

• LineChart： Broken line diagram

• BarChart： Histogram

• PieChart： The pie chart

• RadarChart： Radar map

• ScatterChart： Scatter plot

• HeatmapChart： Heat map

• GaugeChart： The dashboard

• RingChart： Trend chart

• PolarChart： Polar map

• LiquidChart： Liquid level diagram

5、 A simple line chart comes out

6、 stay Inspector View allows you to view and adjust the parameters of each component ,Game  The view will feed back the effect of adjustment in real time .

* Be careful ： There may be some differences in the interface between different versions , But the functions are similar

This is a new version of the interface ：

3-5、  Modify the parameters

take x Axis and y Modify the value of the axis ： modify x The value of the shaft ：

y The value of the axis is modified in ：Series→Serie0→Data：

such as ：

If you want to display all integers ： Set up YAxis 0→Interval： Set to 1 that will do .

This is in Inspector Panel modify properties , stay Game  and Scene Views are displayed in real time , Don't run the program

Four 、 Use code to build diagrams

4-1、 Code

using System.Collections.Generic;
using UnityEngine;
using XCharts;

public class XchartsDemo : MonoBehaviour
{
 public GameObject chart;

 void Start()
 {
 CreateChart();
 }

 // Create a chart
 private void CreateChart()
 {
 List<string> xAxisValue = new List<string>();
 xAxisValue.Add(&quot; Monday &quot;);
 xAxisValue.Add(&quot; Tuesday &quot;);
 xAxisValue.Add(&quot; Wednesday &quot;);
 xAxisValue.Add(&quot; Thursday &quot;);
 xAxisValue.Add(&quot; Friday &quot;);
 List<float> yAxisValue = new List<float>();
 yAxisValue.Add(8);
 yAxisValue.Add(7);
 yAxisValue.Add(5);
 yAxisValue.Add(7);
 yAxisValue.Add(8);
 CreateChart(chart, &quot; Broken line diagram &quot;, &quot; Weeks &quot;, &quot; working hours &quot;, SerieType.Line, LineType.Normal, xAxisValue, yAxisValue);
 }

 /// <summary>
 ///  Generate charts
 /// </summary>
 /// <param name=&quot;_chart&quot;> Chart components </param>
 /// <param name=&quot;_title&quot;> Chart header </param>
 /// <param name=&quot;_boundarygap&quot;> Whether the coordinate axis is left blank </param>
 /// <param name=&quot;xAxisName&quot;>x Axis name of the axis </param>
 /// <param name=&quot;yAxisName&quot;>y Axis name of the axis </param>
 /// <param name=&quot;_serietype&quot;> Set what type of chart </param>
 /// <param name=&quot;_linetype&quot;> What type of line segment </param>
 /// <param name=&quot;xAxisValue&quot;>x The value of the shaft </param>
 /// <param name=&quot;yAxisValue&quot;>y The value of the shaft </param>
 public void CreateChart(GameObject _chart, string _title, string xAxisName, string yAxisName, SerieType _serietype,
 LineType _linetype, List<string> xAxisValue, List<float> yAxisValue)
 {
 var chart = _chart.GetComponent<LineChart>();
 // Header settings
 chart.title.show = true;
 chart.title.text = _title;
 // Background map
 chart.background.gameObject.SetActive(chart.background.show);
 // Prompt box
 chart.tooltip.show = true;
 chart.tooltip.titleFormatter = &quot; &quot;;
 // Legend components
 chart.legend.show = false;
 //x Axis setting
 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 Axis setting
 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;
 // The figure of the mark
 SerieSymbol sy = new SerieSymbol();
 sy.show = true;
 sy.type = SerieSymbolType.Circle;
 sy.gap = 2;
 sy.sizeType = SerieSymbolSizeType.Custom;
 sy.size = 7;
 // Style settings of line segments
 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;
 // The style of the text label on the chart
 SerieLabel sl = new SerieLabel();
 sl.show = true;
 sl.position = SerieLabel.Position.Outside;
 sl.offset = new Vector3(0, 20, 0);
 sl.lineWidth = 25;
 // Chart animation
 SerieAnimation sa = new SerieAnimation();
 sa.enable = true;
 //y Setting of axis value
 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 = &quot;&quot;;
 chart.series.list[0].lineType = _linetype;
 // Empty value
 chart.RemoveData();
 chart.AddSerie(_serietype);
 // add to x The value of the shaft
 for (int i = 0; i < xAxisValue.Count; i++)
 {
 chart.AddXAxisData(xAxisValue[i]);
 }
 // add to y The value of the shaft
 foreach (float item in yAxisValue)
 {
 chart.AddData(0, item);
 }
 }
}


4-2、 design sketch

5、 ... and 、 an account of happenings after the event being told

There are many parameter effects that can be used to try , The author has opened up all possible interface parameters , Just get LineChart Components , Then you can make various settings

Really apply to the project , We still need to explore more by ourselves .