WPF控件LiveCharts——实现动态折线图

技术相关

余弦G 2020/4/5 169 1

## 前言

现目需要在软件界面上实时显示数据的变化，实现类似心电图的效果，发现WPF似乎没有自带的图表控件。于是上网搜索了一下，发现了Live Charts这个开源项目，这里记录一下自己的使用方法。

## 简介

> .Net的简单，灵活，交互式和强大的数据可视化。
> LiveCharts只是数据可视化，但适用于所有人。

Live Charts是一个使用C\#，可以在WPF、UWP和WinForm上应用的图表控件。它支持各种自定义设置以及动画，可以实现丰富的效果，使用起来也较为方便。同时官网上有大量的教程与示例。
官网：[https://lvcharts.net](https://lvcharts.net)
教程与示例：[https://lvcharts.net/App/examples/wpf/start](https://lvcharts.net/App/examples/wpf/start)

本文章主要尝试模拟一个记录图像光流角度和模值的动态折线图，当后台数据更新时，自动更新到图表上。

## 使用

### 安装

打开Visual Studio，新建一个WPF应用。
在右侧解决方案资源管理器中右键项目，选择“管理NuGet程序包”。搜索LiveCharts，安装LiveCharts和LiveCharts.Wpf。
![安装](https://image.cosineg.com/usr/uploads/2020/04/4064326761.png)

### 编写控件

右键工程项目，添加新建项，选择用户控件。

#### XAML

```
<UserControl x:Class="ConstantChanges.ConstantChangesChart"
         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:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
         xmlns:constantChanges="clr-namespace:ConstantChanges"
         mc:Ignorable="d" 
         d:DesignHeight="300" d:DesignWidth="300" d:DataContext="{d:DesignInstance constantChanges:ConstantChangesChart}">
	<Grid>
    	
    	<lvc:CartesianChart  AnimationsSpeed="0:0:0.2" Hoverable="False" DataTooltip="{x:Null}">
        	
        	<lvc:CartesianChart.Series>
            	
            	<lvc:LineSeries x:Name="linePhase"
                            	Values="{Binding PhaseChartValues}" 
                            	PointGeometry="{x:Static lvc:DefaultGeometries.Circle}" 
                            	PointGeometrySize="10"
                            	LineSmoothness="1"
                            	StrokeThickness="3" 
                            	Stroke="#00CCFF"
                            	Fill="Transparent"></lvc:LineSeries>
            	
            	<lvc:LineSeries x:Name="lineModlus"
                            	Values="{Binding ModulusChartValues}" 
                            	PointGeometry="{x:Static lvc:DefaultGeometries.Square}" 
                            	PointGeometrySize="10"
                            	LineSmoothness="0"
                            	StrokeThickness="3" 
                            	Stroke="#FF3300"
                            	Fill="Transparent"
                            	ScalesYAt="1"></lvc:LineSeries>
        	</lvc:CartesianChart.Series>
        	
        	<lvc:CartesianChart.AxisX>
            	<lvc:Axis Title="帧">
                	<lvc:Axis.Separator>
                    	<lvc:Separator IsEnabled="False" Step="1"></lvc:Separator>
                	</lvc:Axis.Separator>
            	</lvc:Axis>
        	</lvc:CartesianChart.AxisX>
        	
        	<lvc:CartesianChart.AxisY>
            	<lvc:Axis x:Name="axisPhase"
                      	Foreground="DodgerBlue" 
                      	Title="角度"
                      	MaxValue="7" 
                      	MinValue="0">
            	</lvc:Axis>
            	<lvc:Axis x:Name="axisModlus"
                      	Foreground="IndianRed" 
                      	Title="模值"
                      	Position="RightTop"
                      	MaxValue="10" 
                      	MinValue="0">
            	</lvc:Axis>
        	</lvc:CartesianChart.AxisY>
    	</lvc:CartesianChart>
	</Grid>
</UserControl>
```

![参数1](https://image.cosineg.com/usr/uploads/2020/04/3050275953.png)![参数2](https://image.cosineg.com/usr/uploads/2020/04/1158853916.png)![参数3](https://image.cosineg.com/usr/uploads/2020/04/1830930999.jpg)

其中曲线部分参数：

- `Values`：绑定C\#代码中的实际数据值  。
- `PointGeometry`：数据点的外观。`{x:Null}`即不标出，只显示曲线。`{x:Static lvc:DefaultGeometries.Circle}` 则将数据点用圆形标出。形状有 `Circle`、`Cross`、`Diamond`、`Square`、`Triangle`可选。
- `PointGeometrySize`：数据点形状的大小。
- `LineSmoothness`：曲线是否圆滑。如为 `1`则圆滑曲线，为 `0`则不圆滑，为折线。
- `StrokeThickness`：曲线粗细程度，越大越粗。
- `Stroke`：曲线颜色。
- `Fill`：曲线下方填充颜色。`Transparent`透明，即不填充。
- `ScalesYAt`：曲线对应Y坐标轴，序号从 `0`开始，默认 `0`。

坐标轴参数：

- `Title`：坐标轴名称。
- `Foreground`：名称和刻度的颜色。
- `Position`：坐标轴位置。
- `MaxValue`：最大值，不写则会根据数据自动变化。
- `MinValue`：最小值，同上。
- `Separator`：网格线，`IsEnabled`决定是否显示，`Step`为网格一格的大小，不写则自动。
- `Labels`：标签。
- `LabelFormatter`：标签格式，如把数值格式化为时间，详见官网教程。

#### C\# Code

```
using System.Windows.Controls;
using LiveCharts;
using LiveCharts.Configurations;

namespace ConstantChanges
{
    // 数据点格式
    public class MeasureModel
    {
        public int Index { get; set; }
        public float Value { get; set; }
    }

    public partial class ConstantChangesChart : UserControl
    {
        private int _index;
        public ChartValues<MeasureModel> PhaseChartValues { get; set; }
        public ChartValues<MeasureModel> ModulusChartValues { get; set; }
        public float PhaseValue { get; set; }
        public float ModulusValue { get; set; }

        // 当数值被更改时，触发更新
        public int Index
        {
            get { return _index; }
            set
            {
                _index = value;
                Read();
            }
        }

        public ConstantChangesChart()
        {
            InitializeComponent();

            // 设置图表的XY和数值对应
            var mapper = Mappers.Xy<MeasureModel>()
                .X(model => model.Index)
                .Y(model => model.Value);
            Charting.For<MeasureModel>(mapper);
            PhaseChartValues = new ChartValues<MeasureModel>();
            ModulusChartValues = new ChartValues<MeasureModel>();
      
            DataContext = this;
        }

        // 更新图表
        private void Read()
        {
            PhaseChartValues.Add(new MeasureModel
            {
                Index = this.Index,
                Value = this.PhaseValue
            });
            ModulusChartValues.Add(new MeasureModel
            {
                Index = this.Index,
                Value = this.ModulusValue
            });

            // 限定图表最多只有十五个元素
            if (PhaseChartValues.Count > 15)
            {
                PhaseChartValues.RemoveAt(0);
                ModulusChartValues.RemoveAt(0);
            }
        }
    }
}
```

### 窗体

在主窗体中插入上面写好的控件，并编写数据处理代码。

```
public partial class MainWindow : Window
{
    private int index = 0;
    public MainWindow()
    {
        InitializeComponent();
        Task.Factory.StartNew(RecordData);
    }
    private void RecordData()
    {
        // 持续生成随机数，模拟数据处理过程
        while (true)
        {
            Thread.Sleep(500);
            var r = new Random();
            float phase = r.Next(1, 7);
            float modulus = r.Next(1, 10);
            // 更新图表数据
            constantChangesChart.PhaseValue = phase;
            constantChangesChart.ModulusValue = modulus;
            constantChangesChart.Index = index++;
        }
    }
}
```

### 实现效果

最终实现的效果：
![效果](https://image.cosineg.com/usr/uploads/2020/04/410564354.gif)

下图是[官网动态折线图示例](https://lvcharts.net/App/examples/v1/wpf/Constant%20Changes)中给的效果图，但是跟其网页里给的实际代码呈现效果完全不同，而且似乎有Bug。如果您知道如何实现，欢迎在评论中告知，十分感谢。
![官网效果](https://image.cosineg.com/usr/uploads/2020/04/1837266461.gif)

赞赏

版权说明：若无另外注明，博客中文章皆为原创，转载请保留文章出处
本文原址：https://fluent.cosineg.com/archive/2

Fluent Blog

Fluent Blog

WPF控件LiveCharts——实现动态折线图

公告栏

文章目录

文章标签

热门文章