模拟数据实现Net8.0+WPF曲线图表展示历史报价记录的方法(多年月日+对应年月日的价格数据)

一、安装 NuGet 包及框架
 LiveChartsCore.SkiaSharpView.WPF
 CommunityToolkit.Mvvm
 项目框架：net8.0-windows
二、ViewModel
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using LiveChartsCore;
using LiveChartsCore.Defaults;
using LiveChartsCore.Kernel.Sketches;
using LiveChartsCore.SkiaSharpView;
using LiveChartsCore.SkiaSharpView.Painting;
using SkiaSharp;
using System.Collections.ObjectModel;
namespace HdhCmsDemo.ViewModels
{
    partial class HdhCmsHistoryPriceDetailUCModel : ObservableObject
    {
        // 历史报价集合：DateTimePoint(日期,价格)
        public ObservableCollection<DateTimePoint> HdhCmsHistoryDatas { get; set; } = new();
        [ObservableProperty]
        private ISeries[] _series;
        [ObservableProperty]
        private ICartesianAxis[] _xAxes;
        [ObservableProperty]
        private Axis[] _yAxes;
        public HdhCmsHistoryPriceDetailUCModel()
        {
            // ========== 模拟多年历史报价，你这里换成从数据库读取 ==========
            HdhCmsHistoryDatas.Add(new DateTimePoint(new DateTime(2023, 01, 05), 126.35));
            HdhCmsHistoryDatas.Add(new DateTimePoint(new DateTime(2023, 02, 10), 132.80));
            HdhCmsHistoryDatas.Add(new DateTimePoint(new DateTime(2023, 03, 15), 129.42));
            HdhCmsHistoryDatas.Add(new DateTimePoint(new DateTime(2023, 05, 02), 141.60));
            HdhCmsHistoryDatas.Add(new DateTimePoint(new DateTime(2023, 08, 22), 137.10));
            HdhCmsHistoryDatas.Add(new DateTimePoint(new DateTime(2023, 11, 08), 145.90));

            HdhCmsHistoryDatas.Add(new DateTimePoint(new DateTime(2024, 02, 12), 152.30));
            HdhCmsHistoryDatas.Add(new DateTimePoint(new DateTime(2024, 04, 18), 148.75));
            HdhCmsHistoryDatas.Add(new DateTimePoint(new DateTime(2024, 07, 03), 160.22));
            HdhCmsHistoryDatas.Add(new DateTimePoint(new DateTime(2024, 10, 25), 155.66));

            HdhCmsHistoryDatas.Add(new DateTimePoint(new DateTime(2025, 01, 10), 168.40));
            HdhCmsHistoryDatas.Add(new DateTimePoint(new DateTime(2025, 04, 06), 174.12));
            HdhCmsHistoryDatas.Add(new DateTimePoint(new DateTime(2025, 09, 14), 169.88));

            // ========== 曲线配置 ==========
            Series = new ISeries[]
            {
                new LineSeries<DateTimePoint>
                {
                    Values = HdhCmsHistoryDatas,
                    Name = "历史报价",
                    LineSmoothness = 1,
                    Stroke = new SolidColorPaint(SKColors.DarkOrange, 2.2f),
                    Fill = new SolidColorPaint(SKColors.Orange.WithAlpha(35)),
                    GeometrySize = 5,
                    GeometryStroke = new SolidColorPaint(SKColors.DarkOrange,1.8f),
                    YToolTipLabelFormatter = point => $"{point.Model.DateTime:yyyy-MM-dd}\\n价格：{point.Model.Value:F2}"
                }
            };

            // ========== 时间X轴（重点！历史多年日期轴） ==========
            XAxes = new ICartesianAxis[]
            {
             new DateTimeAxis(TimeSpan.FromDays(30), dt => dt.ToString("yyyy-MM"))
             {
               Name = "日期",
               LabelsRotation = 30,
               ShowSeparatorLines = true,
               SeparatorsPaint = new SolidColorPaint(SKColors.LightGray, 1)
             }
            };

            // ========== Y价格轴 ==========
            YAxes = new Axis[]
            {
                new Axis
                {
                    Name = "价格",
                    Labeler = v => $"{v:F2}",
                    ShowSeparatorLines = true,
                    SeparatorsPaint = new SolidColorPaint(SKColors.LightGray, 1)
                }
            };
        }
        // 从数据库加载历史报价（直接替换你的查询逻辑）预留自主加载
        [RelayCommand]
        public void LoadHdhCmsHistoryDatas()
        {
            HdhCmsHistoryDatas.Clear();
            // var hdhcmsList = db.QuoteHistory.Where(…).OrderBy(p=>p.QuoteDate).ToList();
            // foreach(var item in hdhcmsList)
            // {
            //     HdhCmsHistoryDatas.Add(new DateTimePoint(item.QuoteDate, item.Price));
            // }
        }

        [RelayCommand]
        public void ClearChart()
        {
            HdhCmsHistoryDatas.Clear();
        }

    }
}
三、 XAML 前台页面
<UserControl x:Class="HdhCmsDemo.UserControls.HdhCmsHistoryPriceDetailUC"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
             xmlns:local="clr-namespace:HdhCmsDemo.UserControls"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="#f00" Width="1700" Height="800">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="200" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <!–第一列–>
        <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Column="0" Background="LightGray">
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Stretch" Background="#F1F5F8">
                <TextBlock Text="&#xf138;" FontSize="20" FontFamily="{StaticResource FontAweSome}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0" />
                <TextBlock Text="报价详情" FontSize="18" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Left" />
            </StackPanel>
            <Border Grid.Row="1" x:Name="borderPriceLeftList" />
        </Grid>
        <Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="30" />
                <RowDefinition Height="80" />
                <RowDefinition Height="30" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
            <StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Stretch" Background="#F1F5F8">
                <TextBlock Text="&#xf138;" FontSize="20" FontFamily="{StaticResource FontAweSome}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0" />
                <TextBlock Text="基本信息介绍" FontSize="18" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Left" />
            </StackPanel>
            <StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Stretch" Background="#F1F5F8">
            </StackPanel>
            <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Stretch" Background="#F1F5F8">
                <TextBlock Text="&#xf138;" FontSize="20" FontFamily="{StaticResource FontAweSome}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="5 0 0 0" />
                <TextBlock Text="历史报价曲线图" FontSize="18" FontWeight="Bold" VerticalAlignment="Center" HorizontalAlignment="Left" />
            </StackPanel>
            <Border Grid.Row="3" HorizontalAlignment="Stretch" Background="#f00000">
                <lvc:CartesianChart
                      Grid.Row="1"
                      Series="{Binding Series}"
                      XAxes="{Binding XAxes}"
                      YAxes="{Binding YAxes}"
                      ZoomMode="X" 
                    >
                </lvc:CartesianChart>
            </Border>
        </Grid>
    </Grid>
</UserControl>