Fluent Blog
首页
归档
友链
关于
Fluent Blog
现在向第一缕阳光宣誓,走出尘埃与那茫然彷徨。
首页
归档
友链
关于
WPF控件LiveCharts——实现动态折线图
技术相关
余弦G
2020/4/5
591
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。  ### 编写控件 右键工程项目,添加新建项,选择用户控件。 #### 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> <!--此处禁用datatooltip,动画速度单位是时:分:秒--> <lvc:CartesianChart AnimationsSpeed="0:0:0.2" Hoverable="False" DataTooltip="{x:Null}"> <!--曲线--> <lvc:CartesianChart.Series> <!--曲线1参数--> <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> <!--曲线2参数--> <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> <!--X坐标轴--> <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> <!--两条Y坐标轴--> <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> ```  其中曲线部分参数: - `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://lvcharts.net/App/examples/v1/wpf/Constant%20Changes)中给的效果图,但是跟其网页里给的实际代码呈现效果完全不同,而且似乎有Bug。如果您知道如何实现,欢迎在评论中告知,十分感谢。 
公告栏
欢迎来到Fluent Blog,一个基于ASP.NET Core 5.0 MVC的博客。前往主站请访问www.cosineg.com
文章目录
文章标签
#Windows
#WPF
#C#
#编程
#软件
热门文章
阅读量
评论量
1 - WPF控件LiveCharts——实现动态折线图
591
2 - AX200断流断网解决方法
427
3 - 校园网实现自动网页认证
322
4 - Fluent Blog上线了
276
5 - 记一个ASP.NET调用原生C++ DLL的坑
264
1 - 写了一个OpenCC.NET
2
2 - Fluent Blog上线了
2
3 - WPF控件LiveCharts——实现动态折线图
1
4 - 正在用ASP.NET Core写一个博客框架
1
5 - 校园网实现自动网页认证
1