LiveCharts2--WPF折线图

最新推荐文章于 2025-04-27 21:51:17 发布

hiZZ5014

最新推荐文章于 2025-04-27 21:51:17 发布

阅读量1.9k

点赞数 18

文章标签：状态模式

本文链接：https://blog.youkuaiyun.com/hiZZ5014/article/details/143227698

版权

LiveCharts2

https://livecharts.dev/ ⬅可以在这里查询最新的LiveCharts2文档

livecharts2可在多种开发平台和框架运行

例如(WPF 、Maui、Blazor Wasm、WinForms 等 ) 几乎包括了所有框架和平台

官方文档查询最新的定义

在左上角搜索栏查询你想要的例如：Axis、CartesianChart等

图表样式

在LiveCharts2中支持多种图表样式

折线图：

柱状图：

饼图：

Visual Studio 2022中下载NuGet包

搜索LiveChartsCore下载关联的LiveCharts2的最新的包（需要点击包括预发布版）

代码

在App.xaml.cs中配置LiveCharts2 图表库的全局设置否则在图表中可能会出现中文显示为口口

 LiveCharts.Configure(config =>
 {
     // 创建一个字体对象，使用 "Microsoft YaHei" 字体
     var typeface = SKTypeface.FromFamilyName("Microsoft YaHei");
     
     // 设置 LiveCharts 的全局字体为 "Microsoft YaHei"
     config.HasGlobalSKTypeface(typeface);
 });

在View.cs中设置页面的DataContext

 public 生产数据记录View(折线图ViewModel _折线图ViewModel)
 {
     InitializeComponent();

     折线图ViewModel = _折线图ViewModel;
     DataContext = 折线图ViewModel;
 }

ViewModel中引用

定义属性


public Axis[] XAxes { get; set; }
public Axis[] YAxes { get; set; }
public Func<double, string> TimeLabelFormatter { get; }

private ISeries[] _seriesCollection; // 私有字段，用于存储图表的数据系列

public ISeries[] SeriesCollection
{
    get => _seriesCollection; // 获取 _seriesCollection 的值
    set => SetProperty(ref _seriesCollection, value); // 设置 _seriesCollection 的值，并通知 UI 更新
}

时间格式 ( 如果使用的X轴需要时间格式的可以使用，用于将数值转换为特定格式的时间字符串 )

 TimeLabelFormatter = value =>  // 时间标签格式化器，接受一个数值，将其转换为时间格式的字符串
 {
     try
     {
         long ticks = Convert.ToInt64(value);  // 将 double 值转换为 long 类型的 Ticks 值
         DateTime dateTime = new DateTime(ticks);  // 根据 Ticks 值创建 DateTime 对象
         return dateTime.ToString("yyyy-MM-dd HH:mm:ss");  // 将 DateTime 对象转换为指定格式的字符串
     }
     catch (Exception)
     {
         
         return string.Empty;  // 如果值不在合法范围内，返回一个默认值或空字符串
     }
 };

下面配置X轴 Y轴

配置X轴（轴、标签、分隔线、刻度线配置为白色是因为在前端将图表背景设置为黑色）

数据点根据自己需求设置转换为 Ticks 值

XAxes = new Axis[]   // 配置 X 轴
{
    new Axis
    {
        IsVisible = true,// 轴是否可见
        Name = "X Axis", // 轴名称
        LabelsRotation = 0, // 标签不旋转
        TextSize = 10, // 标签文字大小设置为10
        ShowSeparatorLines = true, // 显示坐标线
        NamePaint = new SolidColorPaint(SKColors.White), // 轴名称颜色设置为白色
        LabelsPaint = new SolidColorPaint(SKColors.White), // （可选）标签颜色设置为白色
        Labeler = TimeLabelFormatter, // 使用时间格式化器来格式化标签显示
        UnitWidth = TimeSpan.FromMinutes(20).Ticks, // 设置每20分钟对应一个数据点
        MinStep = TimeSpan.FromMinutes(20).Ticks, // 设置最小步长为20分钟
        SeparatorsPaint = new SolidColorPaint(SKColors.White) { StrokeThickness = 1 }, // 设置分隔线的颜色和宽度
        TicksPaint = new SolidColorPaint(SKColors.White) { StrokeThickness = 1 } ,// 设置刻度线的颜色和宽度
        Position = LiveChartsCore.Measure.AxisPosition.Start  // 设置轴的位置
    }
};

配置Y轴（轴、标签、分隔线、刻度线配置为白色是因为在前端将图表背景设置为黑色）

YAxes = new Axis[]   // 配置 Y 轴
{
    new Axis
    {
        IsVisible = true,// 轴是否可见
        Name = "Y Axis", // 轴名称
        MinStep = 1, // 设置最小步长为1"
        TextSize = 12, // 标签文字大小设置为12
        //MinLimit = 0, // 设置 Y 轴的最小值为 0
        ShowSeparatorLines = true, // 显示坐标线
        Position = LiveChartsCore.Measure.AxisPosition.Start, // 设置轴的位置
        NamePaint = new SolidColorPaint(SKColors.White), // 轴名称颜色设置为白色
        LabelsPaint = new SolidColorPaint(SKColors.White), // 标签颜色设置为白色
        SeparatorsPaint = new SolidColorPaint(SKColors.White) { StrokeThickness = 1 }, // 设置分隔线的颜色和宽度
        TicksPaint = new SolidColorPaint(SKColors.White) { StrokeThickness = 1 } // 设置刻度线的颜色和宽度
    }
};

在更新LiveCharts2中配置文件或数据路径并赋值给前端图表

XAxes和YAxes绑定在前端

private void 更新LiveCharts2() //更新LiveCharts图表内容
{
    var cartesianChart = new CartesianChart();   // 创建一个新的 CartesianChart 对象

    Application.Current.Dispatcher.Invoke(() =>   // 在 UI 线程中更新图表数据
    {
        cls数据图表.更新图表数据(_dataService.指定日期数据记录表, 起始日期, 结束日期); //通过 cls数据图表.更新数据 函数更新cls数据图表.SeriesCollection中的数据
        SeriesCollection = cls数据图表.SeriesCollection.Cast<ISeries>().ToArray();   // 更新 SeriesCollection 为 cls数据图表 中的数据
        cartesianChart.Series = SeriesCollection;   // 将更新后的 SeriesCollection 赋值给图表
        cartesianChart.XAxes = XAxes; // 设置 X 轴    (绑定在前端)
        cartesianChart.YAxes = YAxes; // 设置 Y 轴    (绑定在前端)
    });
}

前端添加引用

xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"

前端添加控件

<lvc:CartesianChart  ZoomMode="X" ZoomingSpeed="0.5" Series="{Binding SeriesCollection}"
                 XAxes="{Binding XAxes}"     YAxes="{Binding YAxes}">
</lvc:CartesianChart>

公共类

• 这是一个私有方法，用于初始化图表的系列集合。它接受两个参数：需要记录的参数个数和需要记录的参数名称。

• 定义一个颜色数组，在列表中进行循环，通过索引从颜色数组中选择颜色。

• ObservablePoint 是 LiveCharts 库中的一个类，用于表示数据点。定义线条的属性。

例如：颜色、粗细、线条的填充颜色、透明度、数据点大小、数据点填充颜色、曲线平滑度等

•这段代码的主要目的是初始化图表的系列集合。它根据传入的参数个数和名称创建相应数量的线条系列，并为每个系列设置颜色、名称、数据点大小、线条粗细等属性。通过这种方式，可以在图表中显示多条不同的线条，每条线条都有不同的颜色和名称。

private void 初始化图表(int 需要记录的参数个数, string[] 需要记录的参数名称)
{
    var colors = new SKColor[] //设定线条颜色
    {
        SKColors.Red,
        SKColors.Green,
        SKColors.Blue,
        SKColors.Yellow,
        SKColors.Cyan,
        SKColors.Magenta,
        SKColors.Orange,
        SKColors.Purple,
    };

    SeriesCollection = new List<ISeries>();  // 初始化为 List<ISeries>

    for (int i = 0; i < 需要记录的参数个数; i++)
    {
        var color = colors[i % colors.Length];   // 根据索引选择颜色，循环使用预定义的颜色数组
        SeriesCollection.Add(new LineSeries<ObservablePoint>
        {
            Name = 需要记录的参数名称[i], //线条名称
            Values = new List<ObservablePoint>(), //线条初始数值
            Stroke = new SolidColorPaint(colors[i % colors.Length]) // 使用 SolidColorPaint
            {
                StrokeThickness = 2, // 线条粗细
            },
            Fill = new SolidColorPaint(color.WithAlpha(30)), // 去掉线条下阴影    null
            GeometrySize = 6, // 设置数据点的大小
            GeometryFill = new SolidColorPaint(color),
            LineSmoothness = 0.5, // 曲线的平滑度 (0为折线，1为圆滑曲线)
        });
    }
}

下面是图片样式可以自由拖动和缩放图表