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.LiveChartsExceptionHResult=0x80131500Message=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%20ConfigurationSource=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);