在许多应用程序中，特别是在财务和统计领域，展示随时间变化的数据非常重要。本文将介绍如何使用 LiveCharts 2 和 MVVM 架构在 .NET 应用程序中创建一个以时间为基础的堆叠柱状图。

环境设置

.net 6下需要单独安装

现在最新版本通过Nuget命令安装

https://www.nuget.org/packages/LiveChartsCore.SkiaSharpView.WinForms 下载最新的版本

C#
NuGet\Install-Package LiveChartsCore.SkiaSharpView.WinForms -Version 2.0.0-rc2

创建 ViewModel

在 MVVM 架构中，ViewModel 负责处理视图的数据逻辑。下面是一个示例，展示如何定义一个包含时间序列数据的 ViewModel。

C#
public partial class ViewModel : ObservableObject
{
    private static Random random = new Random();

    // 生成一个月的随机数据
    public static List<DateTimePoint> GenerateMonthData(int year, int month)
    {
        var daysInMonth = DateTime.DaysInMonth(year, month);
        var data = new List<DateTimePoint>();

        for (int day = 1; day <= daysInMonth; day++)
        {
            data.Add(new DateTimePoint(new DateTime(year, month, day), random.Next(5, 50))); // 随机值范围5到50
        }

        return data;
    }

    public ISeries[] Series { get; set; } = {
      new StackedColumnSeries<DateTimePoint>
        {
            Values = GenerateMonthData(2024, 5),
            StackGroup = 0,
            Name = "Category A"  // 分类名称
        },
        new StackedColumnSeries<DateTimePoint>
        {
            Values = GenerateMonthData(2024, 5),
            StackGroup = 0,
            Name = "Category B"  // 分类名称
        },
        new StackedColumnSeries<DateTimePoint>
        {
           Values = GenerateMonthData(2024, 5),
            StackGroup = 0,
            Name = "Category C"  // 分类名称
        }
    };

    public Axis[] XAxes { get; set; } = {
        new Axis
        {
            // 设置X轴的最小值为5月1日的Ticks，最大值为5月31日的Ticks
            MinLimit = new DateTime(2024, 5, 1).Ticks,
            MaxLimit = new DateTime(2024, 5, 31).Ticks,

            // 设置标签格式化器，以便每个刻度都显示为日期
            Labeler = value => new DateTime((long)value).ToString("yyyy-MM-dd"),

            // 设置单位宽度为一天
            UnitWidth = TimeSpan.FromDays(1).Ticks,

            // 设置最小步长为一天，确保每天都有刻度
            MinStep = TimeSpan.FromDays(1).Ticks,

            // 显示分隔线
            ShowSeparatorLines = true,
            SeparatorsPaint = new SolidColorPaint(SKColors.LightSlateGray)
            {
                StrokeThickness = 2,
                PathEffect = new DashEffect(new float[] { 3, 3 })
            },

            // 设置文本大小
            TextSize = 14,

            // 设置轴的位置（底部）
            Position = AxisPosition.Start
        }
    };

    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 用户控件来展示这个堆叠柱状图。

C#
public partial class Form1 : Form
{
    private readonly CartesianChart cartesianChart;

    public Form1()
    {
        InitializeComponent();
        var viewModel = new ViewModel();
        cartesianChart = new CartesianChart
        {
            Series = viewModel.Series,
            XAxes = viewModel.XAxes,
            Location = new System.Drawing.Point(0, 0),
            Dock = DockStyle.Fill
        };

        Controls.Add(cartesianChart);
        Task.Run(async () =>
        {
            while (true)
            {
                viewModel.Series[0].Values = ViewModel.GenerateMonthData(2024, 5);
                viewModel.Series[1].Values = ViewModel.GenerateMonthData(2024, 5);
                viewModel.Series[2].Values = ViewModel.GenerateMonthData(2024, 5);
                await Task.Delay(2000);
            }
        });
    }
}

结论

通过上述步骤，你可以在 .NET 应用程序中创建一个以时间为轴的堆叠柱状图，这对于展示随时间变化的数据非常有用。使用 LiveCharts 2 和 MVVM 模式，可以有效地将数据逻辑与界面表示分离，使得代码更加清晰和可维护。