Recommended reading
- CSDN home page
- GitHub open source address
- Unity3D plugin sharing
- Jane’s address book
- My personal blog
- QQ group: 1040082875
One, foreword
For virtual simulation projects in Unity, there will always be a need to draw diagrams, which can be a lot of work if developed from scratch.
There is one plugin that saves us from having to reinvent the wheel: the XCharts plugin.
XCharts plug-in is a plug-in based on the UGUI system of Unity3D, which can draw line charts, curves, pie charts, radar charts, scatter charts, thermal charts and so on. It has powerful functions, but has too many parameters — let’s learn how to use this plug-in.
Second, the original
The original link: blog.csdn.net/monitor1394… Big guy spent more than a year to develop the plug-in, it is too strong, but the most let me admire is not his technology, but he can get up earlier than the baby later than the baby, ha ha ha
- Github address for the plugin: XCharts home page
- FAQ: XCharts Q&A
- Plugin download: Unitypackage package download
- Interface documentation: API manual
- Parameter configuration: Parameter configuration manual
- Tutorial: XCharts in 5 minutes
Quick start
3-1. Download the installation package firstUnitypackage package download
3-2. Import the resource pack into Unity
3-3. There are various charts in the Demo, as shown below:
3-4. Build a simple scene
In Hierarchy view, first select Canvas and then select Create→XCharts->LineChart: Note that Chart needs to be built under Canvas Hierarchy as this icon is based on UGUI.
- LineChart: LineChart
- BarChart: BarChart
- PieChart: pie chart
- RadarChart: Radar map
- The ScatterChart shows the number of people in the room
- HeatmapChart
- GaugeChart: It’s a big GaugeChart
- RingChart: indicates a trend chart
- PolarChart: Polar map
- LiquidChart: Liquid level diagram
5. A simple line chart comes out
Here is the new interface:
3-5. Modify parameters
Modify the values of x and y axes:
Build diagrams using code
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("On Monday");
xAxisValue.Add("Tuesday");
xAxisValue.Add("On Wednesday");
xAxisValue.Add("Thursday");
xAxisValue.Add("Friday");
List<float> yAxisValue = new List<float> (); yAxisValue.Add(8);
yAxisValue.Add(7);
yAxisValue.Add(5);
yAxisValue.Add(7);
yAxisValue.Add(8);
CreateChart(chart, "Line chart"."Week"."Working hours", SerieType.Line, LineType.Normal, xAxisValue, yAxisValue);
}
/// <summary>
///To generate the chart
/// </summary>
/// <param name="_chart">The chart component</param>
/// <param name="_title">The chart header</param>
/// <param name="_boundarygap">Whether the axes are left blank</param>
/// <param name="xAxisName">The name of the X-axis</param>
/// <param name="yAxisName">Y axis name</param>
/// <param name="_serietype">What type of chart is set</param>
/// <param name="_linetype">What kind of line segment</param>
/// <param name="xAxisValue">The value of the x axis</param>
/// <param name="yAxisValue">The value of y</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>();
// Set the table header
chart.title.show = true;
chart.title.text = _title;
/ / background
chart.background.gameObject.SetActive(chart.background.show);
/ / prompt dialog box
chart.tooltip.show = true;
chart.tooltip.titleFormatter = "";
// Legend component
chart.legend.show = false;
// Set the X-axis
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;
// set the y axis
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 graphic of the tag
SerieSymbol sy = new SerieSymbol();
sy.show = true;
sy.type = SerieSymbolType.Circle;
sy.gap = 2;
sy.sizeType = SerieSymbolSizeType.Custom;
sy.size = 7;
// Line segment style Settings
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.5 f;
// 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;
// Graph animation
SerieAnimation sa = new SerieAnimation();
sa.enable = true;
// Set the value of the y axis
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;
/ / to empty values
chart.RemoveData();
chart.AddSerie(_serietype);
// Add the X-axis value
for (int i = 0; i < xAxisValue.Count; i++)
{
chart.AddXAxisData(xAxisValue[i]);
}
// Add the Y-axis value
foreach (float item in yAxisValue)
{
chart.AddData(0, item); }}}Copy the code4-2. Effect drawing
Five, after the speech
There are many more parameter effects to try, the author has opened up all possible interface parameters, just need to get LineChart component, and then can do various Settings
The real application to the project, we need to explore more.