美化图表——LiveCharts中的时序图的制作，相对问题的解决

---

前言

在项目中，需要用到图表来展示波形的实时变化，故找到了这个LiveCharts的美化图标控件库。并按需求对源码进行了部分修改，在此做上记录。我修改的是以前版本的源码，不知道后续作者是否进行了更新。

LiveCharts的下载地址：官网

---

一、效果展示

我需要的是一个实时的动态更新的时序图的图表，效果展示如下：

二、基本的一些实现的代码

1.X,Y坐标的相关设置

我在这边，需要将X轴设置成跟随时间进行标识。

先要在窗体中拖入一个CartesianChat控件（引用开源库中的LiveCharts.dll，LiveCharts.WinForms.dll，LiveCharts.Wpf.dll的这三个dll，并导入一下就行在此就不赘述了）

首先定义的一个节点数据的形式
代码如下：

    public class MeasureModel
    {
        public System.DateTime DateTime { get; set; } //记录时间（X轴）
        public double Value { get; set; }			  //记录值（Y轴）
    }

定义XY的数据：

            var mapper = Mappers.Xy<MeasureModel>()
             .X(model => model.DateTime.Ticks)   //use DateTime.Ticks as X
             .Y(model => model.Value);           //use the value property as Y
            Charting.For<MeasureModel>(mapper);

            chart_E84.AxisY.Add(new Axis
            {
                //重新定义Y轴显示的样式
                LabelFormatter = value =>
                {
                    e84CodeHighNum O; //此处我用enum代替的输入的double数据，此处可以根据自己的数据方式去改
                    bool SUCCESS = Enum.TryParse(value.ToString(), out O);
                    return SUCCESS ? O.ToString():"" ;
                }
            });
            chart_E84.AxisX.Add(new Axis
            {
                //关闭X轴渲染
                DisableAnimations = true,
                //重新定义X轴显示样式
                LabelFormatter = value => new System.DateTime((long)value).ToString("mm:ss"),
            });
            
            chart_E84.AxisX[0].MinValue = DateTime.Now.Ticks;//这个是为了跟新X轴的最小值，防止由于0值导致范围过大波形不变化的情况。

2.新增波形对象

当前我需要的是步序图，应该新增StepLineSeries这个，我演示图中有很多条，在此我仅用一个来做演示，其他照着复制就行。代码如下：

        public StepLineSeries A_CS_0;//波形对象
        public ChartValues<MeasureModel> A_CS_0_Values { get; set; } = new ChartValues<MeasureModel>();//节点数据

        private void FrmE84Chart_Load(object sender, EventArgs e)
        {
               chart_E84.Series.Add(A_CS_0 = new StepLineSeries
               {
                   Values = A_CS_0_Values,//绑定实时节点数据。
                   BaseStrokeThickness = 3,//这个是我自己改的开源库中的属性（原因后面讲）。没改过的设置线号用StrokeThickness = 。。。
                   PointGeometry = null//我不想要他的空心圆显示的节点，在此就屏蔽了。
               });
		}

3.实时更新数据

当前我需要它根据时间的推进去实时更新图表，所有需要有一段刷新数据的代码如下：

			//线程
            Thread UpDateChartThread;
            UpDateChartThread = new Thread(new ThreadStart(UpDateCharts));
            UpDateChartThread.IsBackground = true;
            UpDateChartThread.Start();

		//线程函数
        private void UpDateCharts()
        {
            while (true)
            {
                if (timer1.Enabled)
                {
                        //将数据整理并怼进绑定节点数据中
                        ChartValues<MeasureModel> measureModels;
                        measureModels = A_CS_0_Values;
                           
                        //将枚举转换成整型
                        int i = (int)item;
                        if (measureModels.Count != 0 && measureModels.Last().Value == i)
                        {
                             measureModels.RemoveAt(measureModels.Count - 1);//此处当更新节点与上一次一样时，删除后新增
                             												 //为什么要删除？因为源码中会判断节点是否更新，不删除节点只修改时，认为不跟新则图像不会刷新。
                        }
                        else
                        {
                             measureModels.Add(new MeasureModel
                             {
                                DateTime = DateTime.Now,
                                Value = i
                             });
                         }
                         measureModels.Add(new MeasureModel
                         {
                            DateTime = DateTime.Now,
                            Value = i
                         });
                     	 Console.WriteLine(stopWatch.ElapsedMilliseconds);
                     	 chart_E84.Refresh();
                }
                Thread.Sleep(timer_Interval);
            }
		}

三、修改的点

当实现后，发现当悬停在线上时，会有提示（增粗显示），但是由于刷新速度过快，源码中显示用的是+1原理，所有悬停时线会越来越宽，且在鼠标离开时由于-1，宽度也并不能回到原有的宽度。故在源码中做如下更改。
在Series.cs中添加如下属性：

        static  double baseStrokeThickness = 1;
        public double BaseStrokeThickness
        {
            get { 
                return baseStrokeThickness; 
            }
            set
            {
                baseStrokeThickness  = value;
            }
        }

---

总结

到此就结束了，还有些细节在这篇文章中省略了，比如不要它进行气泡提示以及加粗时，也可以找到相应源码进行修改。希望对有需求的小伙伴们，带来帮助。