百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT知识 > 正文

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

liuian 2025-03-05 17:59 11 浏览

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

前提条件

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

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

创建项目

  1. 打开 Visual Studio 并创建一个新的 WinForms 应用程序项目。
  2. 使用 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。

相关推荐

使用Assembly打包和部署Spring Boot工程

SpringBoot项目的2种部署方式目前来说,SpringBoot项目有如下2种常见的部署方式一种是使用docker容器去部署。将SpringBoot的应用构建成一个docke...

java高级用法之:调用本地方法的利器JNA

简介JAVA是可以调用本地方法的,官方提供的调用方式叫做JNI,全称叫做javanativeinterface。要想使用JNI,我们需要在JAVA代码中定义native方法,然后通过javah命令...

Linux中如何通过Shell脚本来控制Spring Boot的Jar包启停服务?

SpringBoot项目在为开发者带来方便的同时,也带来了一个新的问题就是Jar包如何启动?在一般情况下我们都是采用了最为经典的java-jar命令来进行启动。然后通过ps命令找到对应的应用线程通...

牛逼!自己手写一个热加载(人民币手写符号一个横还是两个横)

热加载:在不停止程序运行的情况下,对类(对象)的动态替换JavaClassLoader简述Java中的类从被加载到内存中到卸载出内存为止,一共经历了七个阶段:加载、验证、准备、解析、初始化、使用、...

java 错误: 找不到或无法加载主类?看看怎么解决吧!

问题扫述:项目名称调整,由原来的com.mp.qms.report.biz调整为com.mp.busicen.mec.qms.report.biz后。项目在IDEA直接运行,但打包部署到服务器...

如何将 Spring Boot 工程打包成独立的可执行 JAR 包

导语:通过将SpringBoot项目打包成独立的可执行JAR包,可以方便地在任何支持Java环境的机器上运行项目。本文将详细介绍如何通过Maven构建插件将SpringBoot...

class 增量发包改造为 jar 包方式发布

大纲class增量发包介绍项目目录结构介绍jar包方式发布落地方案class增量发包介绍当前项目的迭代修复都是通过class增量包来发版本的将改动的代码class增量打包,如下图cla...

Jar启动和IDE里启动Sprintboot的区别

想聊明白这个问题,需要补充一些前提条件,比如Fatjar、类加载机制等1、Fatjar我们在开发业务程序的时候,经常需要引用第三方的jar包,最终程序开发完成之后,通过打包程序,会把自己的代码和三...

Java 20年,以后将往哪儿走?(java还能流行多久)

在今年的Java20周年的庆祝大会中,JavaOne2015的中心议题是“Java的20年”。甲骨文公司Java平台软件开发部的副总裁GeorgesSaab的主题演讲就将关注点放在了java...

Spring Boot Jar 包秒变 Docker 镜像实现多环境部署

你是否在互联网大厂后端开发工作中,遇到过这样的困扰?当完成一个SpringBoot项目开发,准备将Jar包部署到不同环境时,却发现各个环境依赖不同、配置复杂,部署过程繁琐又容易出错,不仅耗费...

从0开始,让你的Spring Boot项目跑在Linux服务器

1搭建Linux服务器1.1购买阿里云服务器或安装虚拟机这里建议是CentOS7.X或CentOS8.X,当然其他的Linux如deepin、Ubuntu也可以,只是软件环境的安装包和安装方式...

【技术】Maven 上传第三方jar包到私服

通过nexus后台上传私服以NexusRepositoryManagerOSS2.14.5-02为例。登录nexus后台。定义Maven坐标Maven坐标有两种方式:1.自定义参数;2....

JVM参数、main方法的args参数使用

一、前言我们知道JVM参数分为自定义参数、JVM系统参数,Javamain方法的参数。今天就谈谈怎么使用吧。二、查看jvm参数定义自定义参数我们打开cmd窗口,输入java,就能看到自定义参数的格式...

Maven项目如何发布jar包到Nexus私服

Maven项目发布jar包到Nexus私服在编码过程中,有些通用的代码模块,有时候我们不想通过复制粘贴来粗暴地复用。因为这样不仅体现不了变化,也不利于统一管理。这里我们使用mavendeploy的方...

干货丨Hadoop安装步骤!详解各目录内容及作用

Hadoop是Apache基金会面向全球开源的产品之一,任何用户都可以从ApacheHadoop官网下载使用。今天,播妞将以编写时较为稳定的Hadoop2.7.4版本为例,详细讲解Hadoop的安...