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

最新推荐文章于 2026-10-29 17:27:19 发布

原创最新推荐文章于 2026-10-29 17:27:19 发布 · 196 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

收录于

C#技术

WPF

本文介绍了在.NET 8.0 Windows平台下，使用WPF结合LiveCharts2库实现多年历史报价数据（日期+价格）可视化展示的完整方案。内容涵盖NuGet包安装、基于CommunityToolkit.Mvvm的ViewModel设计、DateTimePoint时间序列数据建模、动态X轴（按月分组并格式化为yyyy-MM）、Y轴价格刻度配置、曲线样式定制（颜色、粗细、平滑度、悬停提示），以及预留数据库加载接口。适用于金融、商品价格监控等时序数据分析场景。

一、安装 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="" 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="" 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="" 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>