WPF编程，Live Charts使用说明（51）——X轴Y轴同时赋值的一种方法

之前的事例中，生成图表都是单一的对Y轴进行赋值，或者X轴与Y轴分开赋值的方法实现。
如果想两个XY组成的列表集，进行赋值，或者同时对X轴Y轴进行赋值来更新曲线，这里分享一种方法。

借助live charts的Mappers来实现数据映射。

1、定义一个类

        public class MeasureModel
        {
            public DateTime DateTime
            {
                get; set;
            }
            public double Value
            {
                get; set;
            }
        }

里面有一个时间值和一个数值，用来给XY轴进行赋值。

2、创建数据映射

            var mapper = Mappers.Xy<MeasureModel>()
                .X(model => model.DateTime)   //用 DateTime 做 X
                .Y(model => model.Value);   //用  value  做 Y

            //固定写法，声明绑定.
            Charting.For<MeasureModel>(mapper);

            //实例化与图表绑定的数据集合
            ChartValues = new ChartValues<MeasureModel>();

3、赋值数据生成曲线

                ChartValues.Add(new MeasureModel
                {
                    DateTime = datetime.now,
                    Value = ValueFrom
                });

对数据集合进行数据增加，实时显示图像。

4、区间显示

如果需要像上图所示显示固定区间内的图像，需要在新增数据的同时，将之前的移除，移除时注意对数组的大小进行判定。下面的代码表示，当数组的数据超过150时，才同时进行数据数据的增加与移除。

 if (ChartValues.Count > 150)
	ChartValues.RemoveAt(0);

5、前端

本事例的前端实现

    <lvc:CartesianChart  
                        AnimationsSpeed="0:0:0.5"
                        Hoverable="False"
                        DataTooltip="{x:Null}">
      <lvc:CartesianChart.Series>
        <lvc:LineSeries Values="{Binding ChartValues}"
                        PointGeometry="{x:Null}"
                        LineSmoothness="1"
                        StrokeThickness="6"
                        Stroke="#F34336"
                        Fill="Transparent" />
      </lvc:CartesianChart.Series>
    </lvc:CartesianChart>

注意

因数据是后台实时更新，所以需要用到线程的相关知识。
以及在线程中访问UI资源的注意事项，本事例用到了Task.Factory.StartNew(GetValue);，其中GetValue是一个方法，在这个方法中有一个循环，在循环里使用了第3步中的赋值操作，来更新曲线。