WPF 图表控件LiveCharts的应用——室内监控可视化

需求

为了实现一个完整软件系统，必须具备一些基本的数据呈现控件，例如曲线图、柱状图、饼图等。本次的业务需求为：利用LiveCharts展示后台模拟的温度变化。像Winform里面，微软为我们提供了比较完整的Chart控件，但是在WPF组件中，就没有找到类似的控件，它的意图是让我们自己去实现。我们应该对当下的代码共享时代环抱感激，迄今位置有很多面向WPF的第三方控件库，大部分都是免费开源的。例如：OxyPlot、ModernuiCharts......以及我们今天的主角——LiveCharts。这是一个具备动画效果的图表控件。

首先上效果：

 

环境

Windows 10

Visual Studio 2019

.Net Framework 4.7.2

Ninject

LiveCharts

LiveCharts.Wpf

 

实现

1.通过NuGet引入Ninject、LiveCharts.Wpf、LiveCharts程序包。

解决方案资源管理器-->项目(右键)-->管理NuGet程序包

在“浏览”中搜索：

Ninject

LiveCharts

LiveCharts.Wpf

并安装，完成之后如下图所示：

 

2.在XAML中引用LiveCharts控件的程序集。

在ChamberView.xaml文件的节点上添加对程序集的应用，如下：

其中 xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"就是命名空间的引用。

3.使用LiveCharts控件，值用绑定的方式传递到界面。

如上所示，我们这里有一些属性是通过绑定来赋值的。因此接下来我们来完善这块工作。

4.数据绑定与刷新

4.1定义一个数据点结构——MeasureModel

    /// 

    /// 测量模型
    /// 
    public class MeasureModel
    {
        /// 

        /// X 轴数据
        /// 
        public DateTime DateTime { get; set; }

        /// 

        /// Y 轴数据
        /// 
        public double Value { get; set; }
    }

4.2定义界面相关的视图模型ViewModel

定义通知属性、普通属性和命令以及构造时初始化等工作。

using Deamon.Util.DI;
using LiveCharts;
using LiveCharts.Configurations;
using System;
using System.Threading;
using System.Threading.Tasks;

namespace Deamon.ViewModel
{    
    /// 

    /// 房间信息
    /// 
    public class ChamberViewModel : BaseViewModel
    {
        /// 

        /// 默认构造函数
        /// 
        public ChamberViewModel()
        {
            // 初始化创建一个 X Y 轴上数据显示的图表，并确定 X Y 轴的数据结构
            var mapper = Mappers.Xy()
              .X(model => model.DateTime.Ticks) 
              .Y(model => model.Value);

            // 配置这个图表，可以被其他地方（特定的方式）使用
            Charting.For(mapper);

            // 初始化测量的数据集
            ChartValues = new ChartValues();

            // 设置 X 轴显示的标签格式
            DateTimeFormatter = value => new DateTime((long)value).ToString("mm:ss");

            // 设置图表的其他相关属性
            AxisStep = TimeSpan.FromSeconds(1).Ticks;
            AxisUnit = TimeSpan.TicksPerSecond;

            SetAxisLimits(DateTime.Now);

            // 默认情况下开始数据刷新
            IsReading = false;
            this.InjectStopOnClick();
        }

        #region 公共命令

        /// 

        /// 显示导航栏命令
        /// 
        public RelayCommand ShowBarCommand
        {
            get
            {
                return new RelayCommand(() =>
                {
                    IoC.Get().HasNavigationBar = true;
                });
            }
        }

        /// 

        /// 显示导航栏命令
        /// 
        public RelayCommand ReadingCommand
        {
            get
            {
                return new RelayCommand(() =>
                {
                    this.InjectStopOnClick();
                    RaisePropertyChanged(nameof(ReadingCommandText));
                });
            }
        }

        #endregion

        #region 属性

        /// 

        /// 缓存的测量数据
        /// 
        public ChartValues ChartValues { get; set; }

        /// 

        /// 时间格式化器
        /// 
        public Func DateTimeFormatter { get; set; }

        /// 

        /// X 轴上每个数据的等距跳变（时）长
        /// 
        public double AxisStep { get; set; }
        public double AxisUnit { get; set; }

        /// 

        /// 正在读取
        /// 
        public bool IsReading { get; set; }

        /// 

        /// 控制按钮的文本
        /// 
        public string ReadingCommandText
        {
            get
            {
                return IsReading ? "Stop" : "Start";
            }
        }

        private string curvalue;

        /// 

        /// 当前值
        /// 
        public string Curvalue
        {
            get { return curvalue; }
            set
            {
                curvalue = value;
                RaisePropertyChanged(nameof(Curvalue));
            }
        }

        private double axisMax;

        /// 

        /// X轴最大
        /// 
        public double AxisMax
        {
            get { return axisMax; }
            set
            {
                axisMax = value;
                RaisePropertyChanged(nameof(AxisMax));
            }
        }

        private double axisMin;

        /// 

        /// X轴最小
        /// 
        public double AxisMin
        {
            get { return axisMin; }
            set
            {
                axisMin = value;
                RaisePropertyChanged(nameof(AxisMin));
            }
        }

        #endregion

        /// 

        /// 模拟数据采集
        /// 
        public void Read()
        {
            while (IsReading)
            {
                Thread.Sleep(400);
                var now = DateTime.Now;
                double value = Math.Round(new Random().Next(10, 11) + (1 * new Random().NextDouble()), 2);
                ChartValues.Add(new MeasureModel
                {
                    DateTime = now,
                    Value = value
                });
                SetAxisLimits(now);
                Curvalue = value + "℃";
                // 只保留160个数据，满了就把前面的数据移除
                if (ChartValues.Count > 160) ChartValues.RemoveAt(0);
            }
            IsReading = false;
        }

        /// 

        /// 设置 X 轴上呈现的时间范围
        /// 
        /// 
        private void SetAxisLimits(DateTime now)
        {
            // X轴显示区域的最大时间
            AxisMax = now.Ticks + TimeSpan.FromSeconds(1).Ticks;
            // X轴显示区域的最大时间
            AxisMin = now.Ticks - TimeSpan.FromSeconds(8).Ticks; 
        }

        /// 

        /// 根据标识是否启动采集
        /// 
        public void InjectStopOnClick()
        {
            IsReading = !IsReading;
            if (IsReading)
            {
                Task.Factory.StartNew(Read);
            }
        }

    }
}

4.3数据绑定和界面完善

 

Over

每次记录一小步...点点滴滴人生路...