需求

为了实现一个完整软件系统，必须具备一些基本的数据呈现控件，例如曲线图、柱状图、饼图等。本次的业务需求为：利用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文件的节点上添加对程序集的应用，如下：

<local:AnimationPageBaseView x:Class="Deamon.View.ChamberView"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Deamon.View"
      xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
      Title="ChamberView">

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

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

                    <lvc:CartesianChart Grid.Row="1" AnimationsSpeed="0:0:0.2" Hoverable="False" DataTooltip="{x:Null}">
                        <lvc:CartesianChart.Series>
                            <lvc:LineSeries Values="{Binding ChartValues}" 
                                    PointGeometry="{x:Null}"
                                LineSmoothness="0"
                                StrokeThickness="3" 
                                Stroke="#12B1AD"
                                Fill="#E6F7F8"/>
                        </lvc:CartesianChart.Series>
                        <lvc:CartesianChart.AxisX>
                            <lvc:Axis LabelFormatter="{Binding DateTimeFormatter}" 
                          MaxValue="{Binding AxisMax}" 
                          MinValue="{Binding AxisMin}" ShowLabels="False"
                          Unit="{Binding AxisUnit}">
                                <lvc:Axis.Separator>
                                    <lvc:Separator Step="{Binding AxisStep}" />
                                </lvc:Axis.Separator>
                            </lvc:Axis>
                        </lvc:CartesianChart.AxisX>
                        <lvc:CartesianChart.AxisY>
                            <lvc:Axis ShowLabels="false"  />
                        </lvc:CartesianChart.AxisY>
                    </lvc:CartesianChart>

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

4.数据绑定与刷新

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

    /// <summary>
    /// 测量模型
    /// </summary>
    public class MeasureModel
    {
        /// <summary>
        /// X 轴数据
        /// </summary>
        public DateTime DateTime { get; set; }

        /// <summary>
        /// Y 轴数据
        /// </summary>
        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
{    
    /// <summary>
    /// 房间信息
    /// </summary>
    public class ChamberViewModel : BaseViewModel
    {
        /// <summary>
        /// 默认构造函数
        /// </summary>
        public ChamberViewModel()
        {
            // 初始化创建一个 X Y 轴上数据显示的图表，并确定 X Y 轴的数据结构
            var mapper = Mappers.Xy<MeasureModel>()
              .X(model => model.DateTime.Ticks) 
              .Y(model => model.Value);

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

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

            // 设置 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 公共命令

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

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

        #endregion

        #region 属性

        /// <summary>
        /// 缓存的测量数据
        /// </summary>
        public ChartValues<MeasureModel> ChartValues { get; set; }

        /// <summary>
        /// 时间格式化器
        /// </summary>
        public Func<double, string> DateTimeFormatter { get; set; }

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

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

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

        private string curvalue;

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

        private double axisMax;

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

        private double axisMin;

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

        #endregion

        /// <summary>
        /// 模拟数据采集
        /// </summary>
        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;
        }

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

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

    }
}

4.3数据绑定和界面完善

<local:AnimationPageBaseView x:Class="Deamon.View.ChamberView"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="clr-namespace:Deamon.View"
      xmlns:vm="clr-namespace:Deamon.ViewModel"
      xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
      DataContext="{Binding ChamberVM, Source={ x:Static vm:ViewModelLocator.Locator}}"
      Title="ChamberView">
    <Grid Background="#FF033F42">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal" Margin="10 0 0 0">
            <Button  VerticalAlignment="Center" 
                     Style="{StaticResource OnlyTextButton}" 
                     Command="{Binding ReadingCommand}" 
                     Content="{Binding ReadingCommandText}"/>
        </StackPanel>
        
        <DockPanel Grid.Row="1">
            <Grid Width="300" Height="200">
                <Border CornerRadius="5" Background="White"/>
                <Grid  Margin="5">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="60"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <StackPanel Margin="5 0 0 0"  VerticalAlignment="Center">
                        <TextBlock Text="NO.607" FontSize="22" VerticalAlignment="Center" Foreground="#6C757D"/>
                        <TextBlock Text="Temperature:" FontSize="15"  Foreground="#6C757D"/>
                    </StackPanel>
                    <TextBlock Text="{Binding Curvalue}" Margin="10 5 0 0" Grid.Row="1" FontFamily="Consolas" FontSize="22" Foreground="#6C757D" FontWeight="Bold" />
                    <lvc:CartesianChart Grid.Row="1" AnimationsSpeed="0:0:0.2" Hoverable="False" DataTooltip="{x:Null}">
                        <lvc:CartesianChart.Series>
                            <lvc:LineSeries Values="{Binding ChartValues}" 
                                    PointGeometry="{x:Null}"
                                LineSmoothness="0"
                                StrokeThickness="3" 
                                Stroke="#12B1AD"
                                Fill="#E6F7F8"/>
                        </lvc:CartesianChart.Series>
                        <lvc:CartesianChart.AxisX>
                            <lvc:Axis LabelFormatter="{Binding DateTimeFormatter}" 
                          MaxValue="{Binding AxisMax}" 
                          MinValue="{Binding AxisMin}" ShowLabels="False"
                          Unit="{Binding AxisUnit}">
                                <lvc:Axis.Separator>
                                    <lvc:Separator Step="{Binding AxisStep}" />
                                </lvc:Axis.Separator>
                            </lvc:Axis>
                        </lvc:CartesianChart.AxisX>
                        <lvc:CartesianChart.AxisY>
                            <lvc:Axis ShowLabels="True"  />
                        </lvc:CartesianChart.AxisY>
                    </lvc:CartesianChart>
                </Grid>
            </Grid>
            
        </DockPanel>
       
    </Grid>
</local:AnimationPageBaseView>

 

Over

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

多点连线
/// <summary>
/// 将若干个数据点用线连接的图层
/// 1）无抽点算法，所有的点都会被绘制
/// 2）可以绘制多条数据曲线
/// 3）多条数据曲线的长度可以不同
/// </summary>
public class PointDataLayer : BaseLayer2D



连续数据
/// <summary>
/// 将相邻两点以直线连接的方式表达连续数据的图表
/// * 连续数据的长度如果很长，将分段抽取最大最小值的办法予以表现
/// * 可以显示多条长度相同的连续数据
/// </summary>
public class SerialDataLayer : BaseLayer2D



实时波形
/// <summary>
/// * 最新（进入队列）数据显示在视图右侧
/// * 无数据压缩（视图将绘制所有数据）
/// * 不能显示多组数据
/// </summary>
public class RealTimeDataLayer : BaseLayer2D


三维视图

/// <summary>
/// 功能（数据）3D可视化视图的基类，基于Viewport3D
/// </summary>
public class BaseLayer3D : Viewport3D, IFeatureLayer





视图叠加






视频视图

	/// <summary>
	/// 将通过AForge获取的实时视频图像(GDI的Bitmap对象)在一个Image控件实时更新和显示
	/// </summary>
	public class VideoLayer_WPF : VideoLayer
	/// <summary>
	/// 将通过AForge获取的实时视频图像(GDI的Bitmap对象)在一个PictureBox控件实时更新和显示
	/// </summary>
	public class VideoLayer_WinForm : VideoLayer





MORE...

                    

                    
                    
                    
                    
OxyPlot.Wpf 图表控件使用备忘
目录
OxyPlot.Wpf 图表控件使用备忘
一、OxyPlot.Wpf 控件信息
二、基本概念
(一) PlotView 和 Plot
(二) PlotModel
(三) Axes
(四) Series
(五) Tracker
三、样式设置
(一) 效果对比
(二) 图表边框和数据线条样式
(三) 坐标轴样式
(四) 自定义 Tracker
四、装配和数据填充
五、示例代码
独立观察员 2021 年 5 月 21 日
一、OxyPlot.Wpf 控件信息
GitHub：https://github.com/oxyplot/oxyplot
官方文档地址：https://oxyplot.readthedocs.io/en/latest/index.html
使用版本：NuGet 版 2.0.0
参考文章：《OxyPlot 在 wpf 中绘制实时动态曲线【更新 2.0 去掉 Smooth 属性】》
 
二、基本概念
(一) PlotView 和 Plot
界面上有两种使用方法：
（1）使用 PlotView（界面简单，设置都在代码中）
 
（2）使用 Plot （坐标轴、线条等都在界面上设置）
 
我们使用第一种方法。
 
(二) PlotModel
PlotView 的 Model 属性需绑定一个 PlotModel 对象，它包含了整个图表的各种信息，比如边框、数据线条、坐标轴、图示 等。
 
绑定的属性可按如下定义：
 
(三) Axes
Axes 就是坐标轴集合，可分别添加四个方向的坐标轴，如果没有自行添加，默认会有一个底部的横坐标和一个左侧的纵坐标。
坐标轴也有好几种类型：
 
本文使用的是 LinearAxis：
 
(四) Series
Series 代表了一组数据，有很多种类型：
 
本文以 线条（LineSeries）为例：
 
注释部分是指定平滑模式，开启平滑模式后，两点之间以曲线相连，性能会降低；
关闭平滑模式，两点之间以直线相连，也就是形成折线图。
 
(五) Tracker
Tracker 指的是可浮现的线条上点的信息框，可以理解为 ToolTip 。Tracker 是属于 Series 的。
默认是按住鼠标左键，然后移动到点上，显示 Tracker 。
可使用如下代码改为鼠标移上就显示（其中 _PlotView 为 PlotView 控件对象）：
 
三、样式设置
(一) 效果对比
默认样式如下（不包括标题和坐标轴标题）：
 
Tracker 默认样式如下：
 
可通过设置，改为如下样式：
 
(二) 图表边框和数据线条样式
 
图表边框四边的宽度可分别设置，某一边的边框设为 0 时，相应的坐标轴线样式才有效果。不过坐标轴线条好像有点 Bug，所以此处还是使用边框线来替代坐标轴线。
 
(三) 坐标轴样式
 
分别设置左侧和底部的坐标轴，可进行缩放、平移、刻度线、网格线的开关和设置等。
 
(四) 自定义 Tracker
自定义 Tracker 在界面上设置，通过设置 Tracker 的控件模板来完成：
 
更多样式可参考该控件库的示例代码：
 
四、装配和数据填充
样式设置完成后，将坐标轴和线条装入 PlotModel 中：
 
数据填充到线条的 Points 中，ResetAllAxes () 方法可重置坐标轴，InvalidatePlot () 方法刷新数据：
 
五、示例代码
代码地址：https://gitee.com/dlgcy/DLGCY_OxyPlotTester
发行版下载：https://gitee.com/dlgcy/DLGCY_OxyPlotTester/releases
说明：该项目使用 WPFTemplate 搭建，如果要克隆代码，注意需进行 Git 子模块拉取操作。
程序界面：
WPF
【翻译】WPF 中附加行为的介绍 Introduction to Attached Behaviors in WPF
WPF 使用 Expression Design 画图导出及使用 Path 画图
WPF MVVM 弹框之等待框
解决 WPF 绑定集合后数据变动界面却不更新的问题（使用 ObservableCollection）
WPF 消息框 TextBox 绑定新数据时让光标和滚动条跳到最下面
真・WPF 按钮拖动和调整大小
WPF MVVM 模式下的弹窗
WPF 让一组 Button 实现 RadioButton 的当前样式效果
WPF 原生绑定和命令功能使用指南
WPF 用户控件的自定义依赖属性在 MVVM 模式下的使用备忘
在WPF的MVVM模式中使用OCX组件
                

WPF图表控件Chart FX使用方法系列:如何绘制地图轮廓WPF图表控件Chart FX使用方法系列:如何绘制变化率WPF图表控件Chart FX使用方法系列:如何绘制可视化圆角边框WPF图表控件Chart FX使用方法系列:如何进行数据转换WPF图表控件Chart FX使用方法系列:如何最小化图例空间WPF图表控件Chart FX使用方法系列:如何添加常见图表类型支持WPF图表控件Chart FX使用方法系列:如何创建Win/Loss图表WPF图表控件Chart FX使用方法系列:创建有地图的条形图表WPF图表控件Chart FX使用方法系列:创建Bullet图表（附源码和示例）