LiveCharts2 初步认识

news2024/11/24 2:56:44

文章目录

      • 1 LiveCharts2 是什么?
      • 2 LiveCharts2 可以做什么?
      • 3 简单使用LiveCharts2 ,实现动态曲线图

1 LiveCharts2 是什么?

GitHub:https://github.com/beto-rodriguez/LiveCharts2

官网: https://lvcharts.com/

LiveCharts是一个.net的数据可视化库,可以跨多个设备和框架运行,
它在MIT许可证下运行(免费),并提供了一个付费包来提高性能和扩展功能。

1 开发者
是一位长得巨帅的大佬
在这里插入图片描述

2 简介
LiveCharts2 是一个简单、灵活、交互式以及功能强大的跨平台图表库。
在这里插入图片描述
LiveCharts2 现在几乎可以运行在任何平台,支持Maui,Uno Platform、Avalonia、Etoforms、Xamarin、Blazor-wasm、WPF、Winforms、WinUI、UWP等。
在这里插入图片描述

LiveCharts2 是LiveCharts(0)的升级,它修复了前身的主要设计问题,专注于在任何地方运行,在不丢失V0中已有的特性情况下提高了灵活性。
在这里插入图片描述

2 LiveCharts2 可以做什么?

LiveCharts2 提供了折现图、饼图、柱状图、散点图、面积图等多种类型的图表。此外,它还支持多个图表联动显示,支持动态更新数据、自定义样式和动画效果等功能。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3 简单使用LiveCharts2 ,实现动态曲线图

由于工作中使用winform开发比较多,所以下面是在winform中使用LiveCharts的。下面实现的是一个自定义数据类型的动态曲线图。

3.1 LiveCharts包下载
使用Nuget搜索LiveCharts,下载需要的包即可。我下载了这三个包。
在这里插入图片描述
将LiveCharts包拖拽到控件箱,就可以像其它控件那样正常使用了。在这里我使用了CartesianChart 拖放到界面上,如下图所示:
在这里插入图片描述

3.2 后台代码

OscChart 是曲线控件的名称

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;

using LiveCharts;
using LiveCharts.Configurations;
using LiveCharts.Wpf;

namespace View.PrjForm
{
    public partial class LiveChartForm : Form
    {

        private double _trend;

        //定时刷新曲线
        Timer timerChart;
        public LiveChartForm()
        {
            InitializeComponent();

            #region  多Y轴曲线

            //将自定义类型MeasureModel映射到曲线坐标点
            var mapper = Mappers.Xy<MeasureModel>()
              .X(model => model.Time)    //使用 Time.作为X轴的标签
              .Y(model => model.Value);  //使用Value 作为Y轴的值

            //全局保存映射器
            Charting.For<MeasureModel>(mapper);

            //添加三条曲线
            OscChart.Series.Add(new LineSeries
            {
                Values = new ChartValues<MeasureModel> {
                    new MeasureModel(1,1),
                    new MeasureModel(2,5),
                    new MeasureModel(3,3),
                    new MeasureModel(4,5),
                    new MeasureModel(5,3),
                },
                ScalesYAt = 0
            });

            OscChart.Series.Add(new LineSeries
            {
                Values = new ChartValues<MeasureModel> {
                    new MeasureModel(1,20),
                    new MeasureModel(2,30),
                    new MeasureModel(3,70),
                    new MeasureModel(4,20),
                    new MeasureModel(5,10),
                },

                ScalesYAt = 1
            });
            OscChart.Series.Add(new LineSeries
            {
                Values = new ChartValues<MeasureModel> {
                    new MeasureModel(1,600),
                    new MeasureModel(2,300),
                    new MeasureModel(3,200),
                    new MeasureModel(4,600),
                    new MeasureModel(5,800),
                },
                ScalesYAt = 2
            }); 

            //添加3条Y坐标轴
            OscChart.AxisY.Add(new Axis
            {
                Foreground = System.Windows.Media.Brushes.DodgerBlue,
                Title = "Blue Axis"
            });

            OscChart.AxisY.Add(new Axis
            {
                Foreground = System.Windows.Media.Brushes.IndianRed,
                Title = "Red Axis",
                Position = AxisPosition.RightTop
            });

            OscChart.AxisY.Add(new Axis
            {
                Foreground = System.Windows.Media.Brushes.DarkOliveGreen,
                Title = "Green Axis",
                Position = AxisPosition.RightTop
            });

            OscChart.AxisX.Add(new Axis
            {
                DisableAnimations = true,
                LabelFormatter = value => value.ToString(),
                Separator = new Separator
                {
                    Step = 1
                }
            }) ;

            #endregion


            //定时器刷新
            timerChart = new Timer()
            {
                Interval = 200,

            };
            timerChart.Tick += TimerChart_Tick;
            timerChart.Start();
        }

        int time = 5;
        private void TimerChart_Tick(object sender, EventArgs e)
        {
            LineStart();
        }

        /// <summary>
        /// 连续折现图的方法
        /// </summary>
        private void LineStart()
        {
            time++;

            var r = new Random();
            _trend = r.Next(-10, 10);


            //更新纵坐标数据
            OscChart.Series[0].Values.Add(new MeasureModel(time, _trend));

            _trend = r.Next(10, 100);
            OscChart.Series[1].Values.Add(new MeasureModel(time, _trend));

            _trend = r.Next(100, 1000);
            OscChart.Series[2].Values.Add(new MeasureModel(time, _trend));

           if(time > 20)
            {//只关心前面20个数据

                OscChart.AxisX[0].MaxValue = time; 
                OscChart.AxisX[0].MinValue = time - 20; 
            }
         
        }
    
    }

    /// <summary>
    /// 自定义类型
    /// </summary>
    public class MeasureModel
    {

      public   MeasureModel(double time, double val)
        {
            Time = time;
            Value = val;
        }
        public double Time { get; set; }

        public double Value { get; set; }
    }
}

3.3 效果图
在运行的时候发现LiveCharts在数据量大的时候,会卡顿,没有那么流畅。
在这里插入图片描述
3.4 过程中遇到的问题
具体问题信息如下:

LiveCharts.Helpers.LiveChartsException
  HResult=0x80131500
  Message=LiveCharts does not know how to plot MeasureModel, you can either, use an already configured type or configure this type you are trying to use, For more info see http://lvcharts.net/App/examples/v1/wpf/Types%20and%20Configuration
  Source=LiveCharts

LiveCharts 不知道如何绘制MeasureModel(自定义的数据类型)。
解决方法:使用Mappers映射绑定

           //将自定义类型MeasureModel映射到曲线坐标点
            var mapper = Mappers.Xy<MeasureModel>()
              .X(model => model.Time)    //使用 Time.作为X轴的标签
              .Y(model => model.Value);  //使用Value 作为Y轴的值

            //全局保存映射器
            Charting.For<MeasureModel>(mapper);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/449055.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

CANoe自带的诊断工程分析

&#x1f345; 我是蚂蚁小兵&#xff0c;专注于车载诊断领域&#xff0c;尤其擅长于对CANoe工具的使用&#x1f345; 寻找组织 &#xff0c;答疑解惑&#xff0c;摸鱼聊天&#xff0c;博客源码&#xff0c;点击加入&#x1f449;【相亲相爱一家人】&#x1f345; 玩转CANoe&…

基于matlab的长短期神经网络的三维路径跟踪预测

目录 背影 摘要 LSTM的基本定义 LSTM实现的步骤 基于长短期神经网络LSTM的三维路径跟踪预测 MATALB代码 效果图 结果分析 展望 参考论文 背影 路径跟踪是指通过计算机算法&#xff0c;。长短期记忆模型对复杂&#xff0c;非线性运动的目标跟踪&#xff0c;解决目标跟踪困难&a…

回溯算法专题

回溯算法专题 框架篇全排列问题N 皇后问题如果只需要一个合法答案&#xff0c;怎么办&#xff1f; 快速排序LeetCode 912. 排序数组解题思路代码实现LeetCode 215. 数组中的第K个最大元素解题思路代码实现总结 不要纠结&#xff0c;干就完事了&#xff0c;熟练度很重要&#xf…

e与phi不互素 --- 四道题详记

文章目录 题一([MoeCTF2022]signin)题目描述&#xff1a;题目分析&#xff1a; 题二(unusualrsa5)题目描述&#xff1a;题目分析&#xff1a; 题三([0ctf 2016]RSA?)题目描述&#xff1a;题目分析&#xff1a; 题四(2022ctfshow卷王杯现代密码签到)题目描述&#xff1a;题目分…

【Python】re模块

一、re模块简介及操作方法 正则表达式其本身就是一种小型的&#xff0c;高度专业化的编程语言。在Python中&#xff0c;它被内 嵌在了re模块里面&#xff0c;正则表达式模式被编译成一系列的字节码&#xff0c;然后由用C编写的匹 配引擎执行。 1、re.search方法 re.search 扫描…

“王炸”组合竞逐「行泊一体」

去年开始&#xff0c;在中国市场&#xff0c;「行泊一体」的热度&#xff0c;不亚于当年特斯拉推出FSD&#xff0c;甚至更加火热。从上游芯片、传感器&#xff0c;到域控制器、智能驾驶系统供应商以及车企&#xff0c;都在公开场合不断普及这个组合功能。 「行泊一体」市场的启…

MongoDBRedis基础知识

MongoDB&Redis基础知识 1. MongoDB简介2. Redis 关系型数据库遵循ACID原则&#xff1a; 原子性一致性独立性持久性 分布式系统&#xff1a;由多台计算机和通信的软件组件通过计算机网络连接组成&#xff0c;分布式系统是建立在网络之上的软件系统&#xff0c;因为软件的特…

操作系统论文导读(七):Response-Time Analysis for Mixed Criticality Systems——混合关键系统的响应时间分析

目录 一、论文核心思想 二、案例引入 三、基础定义 四、分区关键性调度 (PC) 五、SMC调度 5.1 调度流程 5.2 响应时间分析&#xff08;考虑EDF分配&#xff09; 5.3 优先级分配 六、AMC调度 6.1 调度流程 6.2 响应时间分析&#xff08;考虑EDF分配&#xff09; 6.3 AMC…

Cesium 核心概念 核心接口

Cesimum 可以做什么 Cesium 是一个开源的3D地球可视化引擎&#xff0c;它可以在Web浏览器中以高性能和高质量呈现全球范围内的地球表面数据。 Cesium 可以用于以下领域&#xff1a; 地理信息系统&#xff1a;Cesium 可以呈现地球表面上的各种地理信息数据&#xff0c;包括卫…

【Python入门】NumPy 数组裁切及数据类型

前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! 裁切数组 python 中裁切的意思是将元素从一个给定的索引带到另一个给定的索引。 我们像这样传递切片而不是索引&#xff1a;[start&#xff1a;end]。 我们还可以定义步长&#xff0c;如下所示&#xff1a;[start&#x…

RabbitMQ实现消息的延迟推送或延迟发送

一、RabbitMQ是什么&#xff1f; 1.RabbitMQ简介 RabbitMQ是有erlang语言开发&#xff0c;基于AMQP&#xff08;Advanced Message Queue 高级消息队列协议&#xff09;协议实现的消息队列。 常见的消息队列有&#xff1a;RabbitMQ、Kafka 和 ActiveMQ 2.RabbitMQ的优点 Rab…

设计模式 --- 创建者模式

一、概述 创建型模式的主要关注点是“怎样创建对象&#xff1f;”&#xff0c;它的主要特点是“将对象的创建与使用分离”。 这样可以降低系统的耦合度&#xff0c;使用者不需要关注对象的创建细节。 创建型模式分为&#xff1a; 单例模式 工厂方法模式 抽象工程模式 原型…

【linux】yum “应用商店” 的基本用法

好多工具 yum软件包查看软件包安装软件卸载软件 yum 通俗的讲&#xff0c;这就似我们手机上的应用商店&#xff0c;只不过是在linux下的。 我们可以用yum来下载东西。 软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序。 但是这样…

【Linux 命令】chroot

文章目录 一、背景二、语法三、案例3.1 命令3.2 系统调用3.3 查找服务是否存在于 chrooted 监禁内 四、注意事项 chroot 用来在指定根目录运行命令&#xff08;即指定 / 的位置&#xff09;&#xff0c;不可操作指定目录之外的地方。其是一种非常简单的资源隔离化操作&#xff…

idea 配置docker 进行上传镜像,部署启动容器

前言 在我们开发测试过程中&#xff0c;需要频繁的更新docker镜像&#xff0c;然而默认情况下&#xff0c;docker的2375端口是关闭的&#xff0c;下面介绍如何打开端口。 修改docker配置文件 操作步骤&#xff1a; 1.1、修改配置 登录docker所在服务器&#xff0c;修改docker…

web前端实验5

实 验 报 告 课 程 Web前端应用开发 实验项目 Jquery AJAX编程 成 绩 专业班级 班内序号 指导教师 姓 名 学 号 实验日期 实验目的及要求&#xff1a; &#xff08;1&#xff09; 理解和掌握Jquery AJAX的get方式请求 &#xff08;2&#xff09; 理解和掌握Jquery AJAX的pos…

释放ChatGPT潜能:4款高效插件让你的AI助手更强大

你的ChatGPT页面是什么样的&#xff1f;是这样的吗&#xff1f; 今天我要向大家推荐四款「ChatGPT免费插件」。这些插件是我们在与GPT日常交流中&#xff0c;使用频率最高的四个工具。 一旦安装这些插件&#xff0c;你的GPT将立即变身为「超级ChatGPT」。使用起来更为流畅&am…

BEV+Transformer对无人驾驶硬件体系的巨大改变

摘要&#xff1a; BEVTransformer彻底终结了2D直视图CNN时代&#xff0c;BEVTransformer对智能驾驶硬件系统有着什么样的影响&#xff1f;背后的受益者又是谁&#xff1f; 图片来源&#xff1a;特斯拉 BEVTransformer是目前智能驾驶领域最火热的话题&#xff0c;没有之一&…

【大数据平台开发】【Web框架】001Django框架简介

【大数据平台开发】【Web框架】001Django框架简介 文章目录 【大数据平台开发】【Web框架】001Django框架简介一. Django简介与安装1.1 Django安装1.2 Django简介1.3 框架功能简介 二. Django框架的最小程序2.1 新建工程2.2 修改工程2.3 运行工程2.4 django-admin与manage.py2.…

(二)EalsticSearch 辅助工具 Kibana 介绍与安装

1、什么是 kibana &#xff1f; Kibana 是一个针对Elasticsearch的开源分析及可视化平台&#xff0c;用来搜索、查看交互存储在Elasticsearch索引中的数据。使用Kibana&#xff0c;可以通过各种图表进行高级数据分析及展示。 Kibana让海量数据更容易理解。它操作简单&#xff…