本文将详细介绍如何在 WinForms 应用程序中使用 LiveCharts 2 创建一个动态更新的折线图，其中 X 轴显示时间（格式为小时：分钟：秒）的动态时间序。
前提条件
在开始之前，请确保您已经安装以下工具和库：
- Visual Studio：用于开发 WinForms 应用程序。
- LiveCharts 2：用于创建图表。可以通过 NuGet 包管理器安装。
- CommunityToolkit.Mvvm：用于实现 MVVM 模式。
创建项目
- 打开 Visual Studio 并创建一个新的 WinForms 应用程序项目。
- 使用 NuGet 包管理器安装以下包：
LiveChartsCore.SkiaSharpView.WinForms -Version 2.0.0-rc2
CommunityToolkit.Mvvm
创建 ViewModel
首先，我们需要创建一个 ViewModel 来管理图表的数据和配置。
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore.Defaults;
using LiveChartsCore.Measure;
using LiveChartsCore.SkiaSharpView.Painting.Effects;
using LiveChartsCore.SkiaSharpView.Painting;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore;
using SkiaSharp;
using System;
using System.Collections.Generic;
namespace AppLiveChart
{
public partial class ViewModel : ObservableObject
{
// 定义三个数据列表，用于存储不同类别的数据点
public static List Values1 { get; } = new List();
public static List Values2 { get; } = new List();
public static List Values3 { get; } = new List();
// 定义图表的系列（Series），每个系列代表一条折线
public ISeries[] Series { get; set; } = {
new LineSeries
{
Values = Values1, // 设置数据点
Name = "Category A" // 分类名称
},
new LineSeries
{
Values = Values2,
Name = "Category B" // 分类名称
},
new LineSeries
{
Values = Values3,
Name = "Category C" // 分类名称
}
};
// 定义X轴的属性
public Axis[] XAxes { get; set; } = {
new Axis
{
// 设置X轴的最小值为当前时间减去60秒的Ticks，最大值为当前时间加上60秒的Ticks
MinLimit = DateTime.Now.AddSeconds(-60).Ticks,
MaxLimit = DateTime.Now.AddSeconds(60).Ticks,
// 设置标签格式化器，以便每个刻度都显示为时间
Labeler = value => new DateTime((long)value).ToString("HH:mm:ss"),
// 设置单位宽度为1秒
UnitWidth = TimeSpan.FromSeconds(1).Ticks,
// 设置最小步长为1秒，确保每秒都有刻度
MinStep = TimeSpan.FromSeconds(1).Ticks,
// 显示分隔线
ShowSeparatorLines = true,
SeparatorsPaint = new SolidColorPaint(SKColors.LightSlateGray)
{
StrokeThickness = 2, // 分隔线的粗细
PathEffect = new DashEffect(new float[] { 3, 3 }) // 分隔线的虚线效果
},
// 设置文本大小
TextSize = 14,
// 设置轴的位置（底部）
Position = AxisPosition.Start,
}
};
// 定义Y轴的属性
public Axis[] YAxes { get; set; } = {
new Axis
{
MinLimit = 0, // 设置最小值
MaxLimit = 300, // 设置最大值
ShowSeparatorLines = true, // 显示分隔线
SeparatorsPaint = new SolidColorPaint(new SkiaSharp.SKColor(0, 0, 0),1), // 分隔线的颜色和粗细
TextSize = 20, // 设置文本大小
}
};
}
}
创建 WinForms 窗体
接下来，我们需要创建一个 WinForms 窗体，并将图表控件添加到窗体中。
Form1.Designer.cs
在 Form1.Designer.cs 文件中，设置控件的布局：
namespace AppLiveChart
{
partial class Form1
{
private LiveChartsCore.SkiaSharpView.WinForms.CartesianChart cartesianChart1;
private System.Windows.Forms.Timer timer;
private void InitializeComponent()
{
this.cartesianChart1 = new LiveChartsCore.SkiaSharpView.WinForms.CartesianChart();
this.timer = new System.Windows.Forms.Timer();
this.SuspendLayout();
//
// cartesianChart1
//
this.cartesianChart1.Location = new System.Drawing.Point(12, 12);
this.cartesianChart1.Name = "cartesianChart1";
this.cartesianChart1.Size = new System.Drawing.Size(776, 426);
this.cartesianChart1.TabIndex = 0;
//
// Form1
//
this.ClientSize = new System.Drawing.Size(800, 450);
this.Controls.Add(this.cartesianChart1);
this.Name = "Form1";
this.Text = "动态折线图";
this.ResumeLayout(false);
}
}
}
Form1.cs
在 Form1.cs 文件中，初始化图表和定时器以动态更新数据：
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using SkiaSharp;
using System.Reflection;
namespace AppLiveChart
{
public partial class FrmMain : Form
{
private ViewModel _viewModel;
private System.Timers.Timer _timer;
private Random random = new Random();
public FrmMain()
{
InitializeComponent();
_viewModel = new ViewModel();
cartesianChart1.Series = _viewModel.Series;
cartesianChart1.XAxes = _viewModel.XAxes;
cartesianChart1.YAxes = _viewModel.YAxes;
InitializeTimer();
//配制全局中文显示，不然会乱码
LiveCharts.Configure(x =>
{
x.HasGlobalSKTypeface(SKFontManager.Default.MatchCharacter('汉'));
});
}
private void InitializeTimer()
{
_timer = new System.Timers.Timer(1000); // 每秒更新一次
_timer.Elapsed += Timer_Tick;
_timer.AutoReset = true;
_timer.Enabled = true;
}
private void Timer_Tick(object? sender, EventArgs e)
{
ViewModel.Values1.Add(new LiveChartsCore.Defaults.DateTimePoint(DateTime.Now,random.Next(1,100)));
ViewModel.Values2.Add(new LiveChartsCore.Defaults.DateTimePoint(DateTime.Now, random.Next(1, 50)));
ViewModel.Values3.Add(new LiveChartsCore.Defaults.DateTimePoint(DateTime.Now, random.Next(50, 100)));
if (ViewModel.Values1.Count > 60)//最多显示60个点
{
ViewModel.Values1.RemoveAt(0);
}
cartesianChart1.Series = _viewModel.Series;
_viewModel.XAxes[0].MinLimit = DateTime.Now.AddSeconds(-60).Ticks;
_viewModel.XAxes[0].MaxLimit = DateTime.Now.AddSeconds(60).Ticks;
cartesianChart1.XAxes = _viewModel.XAxes;
}
}
}
运行程序
编译并运行你的项目，你将看到一个包含三个动态更新折线的图表，X 轴显示时间（格式为小时：分钟：秒）。
总结
本文详细介绍了如何使用 WinForms 和 LiveCharts 2 创建一个动态更新的折线图。通过定义 ViewModel 管理数据和图表配置，并使用定时器定期更新数据，我们实现了一个实时更新的图表。希望这篇文章能帮助你更好地理解和使用 LiveCharts 2。