C# WinForms 和 LiveCharts 2 创建动态折线图

本文将详细介绍如何在 WinForms 应用程序中使用 LiveCharts 2 创建一个动态更新的折线图，其中 X 轴显示时间（格式为小时：分钟：秒）的动态时间序。

前提条件

在开始之前，请确保您已经安装以下工具和库：

Visual Studio：用于开发 WinForms 应用程序。
LiveCharts 2：用于创建图表。可以通过 NuGet 包管理器安装。
CommunityToolkit.Mvvm：用于实现 MVVM 模式。

创建项目

打开 Visual Studio 并创建一个新的 WinForms 应用程序项目。
使用 NuGet 包管理器安装以下包：

C#
LiveChartsCore.SkiaSharpView.WinForms -Version 2.0.0-rc2
CommunityToolkit.Mvvm

创建 ViewModel

首先，我们需要创建一个 ViewModel 来管理图表的数据和配置。

C#
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<DateTimePoint> Values1 { get; } = new List<DateTimePoint>();
        public static List<DateTimePoint> Values2 { get; } = new List<DateTimePoint>();
        public static List<DateTimePoint> Values3 { get; } = new List<DateTimePoint>();

        // 定义图表的系列（Series），每个系列代表一条折线
        public ISeries[] Series { get; set; } = {
            new LineSeries<DateTimePoint>
            {
                Values = Values1, // 设置数据点
                Name = "Category A"  // 分类名称
            },
            new LineSeries<DateTimePoint>
            {
                Values = Values2,
                Name = "Category B"  // 分类名称
            },
            new LineSeries<DateTimePoint>
            {
               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 文件中，设置控件的布局：

C#
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 文件中，初始化图表和定时器以动态更新数据：

C#
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。

目录