数字孪生-Unity中使用EChart插件实时可视化曲线

一、XChart介绍

XChart是Unity数据可视化图表插件。一款基于UGUI的功能强大、易用、参数可配置的数据可视化图表插件。支持折线图、柱状图、饼图、雷达图、散点图、热力图、环形图、K线图、极坐标、平行坐标等十种常见免费内置图表，以及3D饼图、3D柱图、3D金字塔、漏斗图、仪表盘、水位图、象形柱图、甘特图、矩形树图等多种扩展图表。

Xchart下载链接

二、使用步骤

1.在Hierarc栏右键创建空对象，必须创建在Canvas对象下

2.将Example_Dynamic脚本挂载到前面创建的空对象体上

3.示例文件没有添加Serie，需要自己添加。可以在inspector下面通过ADD Serie添加自己需要的数据表格式。也可以在脚本文件中直接添加

4.此处使用的折线图，选择Line，添加完成和如图所示。

5.由于示例文件横坐标为年月日，原表尺寸过小显示不完，将表长宽扩大1.5倍。原始设置最大显示数据为100个，为了方便观察我改为了10个（也可以在代码中修改）。可以自行先运行看看效果，错误暂时不用管。

6.对源码进行谢改，添加x轴和曲线移动方向设置。

public class Example_Dynamic : MonoBehaviour
    {
        public int maxCacheDataNumber = 10;//最大显示数据数
        public float initDataTime = 2;
        public bool insertDataToHead = true;

        private BaseChart chart;
        private float updateTime;
        private float initTime;
        private int initCount;
        private int count;
        private bool isInited;
        private DateTime timeNow;
        public int category;//横坐标显示值，声明为共有属性，方便每次循环自增

        void Awake()
        {
            chart = gameObject.GetComponent<BaseChart>();
            var serie = chart.GetSerie(0);//设置曲线0实时变化
            serie.symbol.show = false;
            serie.maxCache = maxCacheDataNumber;

            var xAxis = chart.GetOrAddChartComponent<XAxis>();
            xAxis.maxCache = maxCacheDataNumber;
            timeNow = DateTime.Now;
            timeNow = timeNow.AddSeconds(-maxCacheDataNumber);

            //添加y轴，y轴默认每刻度为50，最大值随数据数组中最大值自动变换
            var yAxis = chart.GetOrAddChartComponent<YAxis>();
            yAxis.show = true;
            yAxis.type = Axis.AxisType.Value;

            //通过设置true、false改变曲线和x轴移动方向，自行更改设置效果
            serie.insertDataToHead = false;
            xAxis.insertDataToHead = false;
        }

        void Update()
        {
            if (initCount < maxCacheDataNumber)
            {
                int count = (int) (maxCacheDataNumber / initDataTime * Time.deltaTime);
                for (int i = 0; i < count; i++)
                {
                    timeNow = timeNow.AddSeconds(1);
                    var value = UnityEngine.Random.Range(60, 150);
                    chart.AddXAxisData("year" + category++);//设置显示的横坐标,将category变量公用属性，此处我改为年份，默认为字符串不能直接设置为数值
                    chart.AddData(0, value);
                    initCount++;
                    if (initCount > maxCacheDataNumber) break;
                }
                chart.RefreshChart();
            }
            updateTime += Time.deltaTime;
            if (updateTime >= 1)
            {
                var value = UnityEngine.Random.Range(60, 150);
                updateTime = 0;
                count++;
                chart.AddXAxisData("year" + category++);
                chart.AddData(0, value);
                chart.RefreshChart();
            }
        }
    }

７.效果如下