求助：如何在LiveCharts2中使用ObservableCollection实现图表动态更新

阿华AIGC实验室

2026-5-1

解决LiveCharts2结合ObservableCollection动态更新图表的问题

我帮你梳理下问题根源，然后一步步修正代码，让图表能正常响应动态数据更新：

问题核心分析

你当前的代码存在两个关键问题：

绑定类型不匹配：CartesianChart的Series属性需要的是ISeries类型的集合（比如ObservableCollection<ISeries>），但你直接绑定了ObservableCollection<ObservableValue>，这不符合控件的绑定要求。
缺少属性变更通知：你的窗口类没有实现INotifyPropertyChanged接口，当你修改属性或集合时，UI无法感知到变化，自然不会刷新图表。
错误的更新逻辑：每次点击按钮都重新创建集合并重置DataContext，这不是动态更新的正确姿势——我们应该复用集合，通过修改集合内的元素值或添加新元素来触发图表刷新。

修正后的完整代码

C# 代码

using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows;
using LiveChartsCore;
using LiveChartsCore.Defaults;
using LiveChartsCore.SkiaSharpView;

namespace WpfSample
{
    public partial class MainWindow : Window, INotifyPropertyChanged
    {
        // 静态图表的系列集合
        private ISeries[] _series;
        public ISeries[] Series
        {
            get => _series;
            set
            {
                _series = value;
                OnPropertyChanged();
            }
        }

        // 动态图表的系列集合（符合LiveCharts2绑定要求）
        private ObservableCollection<ISeries> _dynamicSeries;
        public ObservableCollection<ISeries> DynamicSeries
        {
            get => _dynamicSeries;
            set
            {
                _dynamicSeries = value;
                OnPropertyChanged();
            }
        }

        // 存储动态数据的ObservableCollection，LiveCharts2会自动监听其变化
        private ObservableCollection<ObservableValue> _dynamicData;
        public ObservableCollection<ObservableValue> DynamicData
        {
            get => _dynamicData;
            set
            {
                _dynamicData = value;
                OnPropertyChanged();
            }
        }

        public MainWindow()
        {
            InitializeComponent();
            // 初始化动态数据和系列
            DynamicData = new ObservableCollection<ObservableValue>();
            DynamicSeries = new ObservableCollection<ISeries>
            {
                new LineSeries<ObservableValue>
                {
                    Values = DynamicData // 将系列的数据源绑定到动态集合
                }
            };
            DataContext = this;
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            // 先清空旧数据（可选，根据你的业务需求调整）
            DynamicData.Clear();

            // 添加初始数据
            DynamicData.Add(new ObservableValue(1));
            DynamicData.Add(new ObservableValue(2));
            DynamicData.Add(new ObservableValue(3));

            // 修改第一个元素的值，此时图表会自动刷新
            DynamicData[0].Value = 5;

            // 静态图表的代码保持不变
            Series = new ISeries[]
            {
                new LineSeries<double>
                {
                    Values = new double[] { 6, 4, 3, 9, 4, 2, 1 },
                }
            };
        }

        // 实现INotifyPropertyChanged接口，用于通知UI属性变更
        public event PropertyChangedEventHandler PropertyChanged;
        protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

XAML 代码

<Window x:Class="WpfSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfSample"
        xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.WPF;assembly=LiveChartsCore.SkiaSharpView.WPF"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <lvc:CartesianChart Series="{Binding Series}" Margin="4,4,433,174">
        </lvc:CartesianChart>
        <!-- 绑定到正确的动态系列集合 -->
        <lvc:CartesianChart Series="{Binding DynamicSeries}" Margin="403,0,0,177">
        </lvc:CartesianChart>
        <Button Content="Button" HorizontalAlignment="Left" Margin="728,318,0,0" VerticalAlignment="Top" Click="Button_Click"/>
    </Grid>
</Window>

关键改动说明

实现INotifyPropertyChanged：这是WPF中属性变更通知的核心机制，确保当我们修改Series、DynamicSeries或DynamicData时，UI能实时感知并更新。
正确构建系列绑定：创建ObservableCollection<ISeries>类型的DynamicSeries，其中包含一个关联了DynamicData的LineSeries——LiveCharts2会自动监听DynamicData的集合变化（添加/删除元素）以及每个ObservableValue的Value属性变化。
优化初始化逻辑：在窗口构造函数中完成集合初始化和DataContext设置，点击按钮时仅修改数据内容，避免重复创建集合和重置上下文。