.NET MAUI中SfCartesianChart动态系列不即时渲染问题求助

问题描述 #

我正尝试在.NET MAUI中使用**SfCartesianChart（版本22.2.12）**显示动态数量的系列，所有图表数据存储在ViewModel中：

public class ChartPageViewModel : BaseViewModel, IChartPageViewModel
{
    //页面加载后异步加载数据，设置数据后触发PropertyChangedEvent
    public ObservableCollection<IChartSeriesViewModel> DataSeries { get; set; }
}

public class ChartSeriesViewModel : IChartSeriesViewModel
{
    public string Title { get; set; }
    public IList<IChartPointViewModel> Data { get; set; }
}
    
public class ChartPointViewModel : IChartPointViewModel
{
    public DateTime Date { get; set; }
    public decimal Value { get; set; }
}

我通过值转换器将数据绑定到Series属性：

<chart:SfCartesianChart Series="{Binding DataSeries, Converter={StaticResource DataSeriesConverter}}">
     <chart:SfCartesianChart.XAxes>
         <chart:CategoryAxis />
     </chart:SfCartesianChart.XAxes>
     <chart:SfCartesianChart.YAxes>
         <chart:NumericalAxis />
     </chart:SfCartesianChart.YAxes>
 </chart:SfCartesianChart>

值转换器代码（将IList转换为ChartSeriesCollection）：

public class SfCartesianChartDataSeriesConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is IList<IChartSeriesViewModel> chartSeries)
        {
            ChartSeriesCollection series = new ChartSeriesCollection();

            foreach (var i in chartSeries)
            {
                series.Add(new FastLineSeries()
                {
                    ItemsSource = i.Data,
                    XBindingPath = nameof(IChartPointViewModel.Date),
                    YBindingPath = nameof(IChartPointViewModel.Value),
                });
            }

            return series;
        }

        return null;
    }
}

但数据仅在视图重绘（如窗口调整大小）时才会显示。PropertyChangedEvent工作正常——静态添加系列时，数据会在PropertyChangedEvent触发后立即显示：

<chart:SfCartesianChart>
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis />
    </chart:SfCartesianChart.XAxes>
    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis />
    </chart:SfCartesianChart.YAxes>

    <chart:FastLineSeries
           ItemsSource="{Binding DataSeries[0].Data}"
           XBindingPath="Date"
           YBindingPath="Value" />
</chart:SfCartesianChart>

需要解决：如何强制图表重绘？或者这种场景下正确的绑定方式是什么？

解决方案 #

方案1：直接在ViewModel中维护ChartSeriesCollection（推荐） #

放弃值转换器，在ViewModel中直接创建并暴露ChartSeriesCollection，让集合变更直接被图表感知：

1. 修改ViewModel：

public class ChartPageViewModel : BaseViewModel, IChartPageViewModel
{
    private ChartSeriesCollection _chartSeries;
    public ChartSeriesCollection ChartSeries
    {
        get => _chartSeries;
        set => SetProperty(ref _chartSeries, value);
    }

    // 异步加载数据方法
    public async Task LoadDataAsync()
    {
        // 模拟异步获取原始数据系列
        var rawSeries = await GetRawDataSeries();
        
        var seriesCollection = new ChartSeriesCollection();
        foreach (var item in rawSeries)
        {
            seriesCollection.Add(new FastLineSeries()
            {
                ItemsSource = item.Data,
                XBindingPath = nameof(IChartPointViewModel.Date),
                YBindingPath = nameof(IChartPointViewModel.Value),
                Title = item.Title
            });
        }

        ChartSeries = seriesCollection;
    }
}

2. 修改XAML绑定：

<chart:SfCartesianChart Series="{Binding ChartSeries}">
     <chart:SfCartesianChart.XAxes>
         <chart:CategoryAxis />
     </chart:SfCartesianChart.XAxes>
     <chart:SfCartesianChart.YAxes>
         <chart:NumericalAxis />
     </chart:SfCartesianChart.YAxes>
 </chart:SfCartesianChart>

这种方式下，ChartSeries属性更新时，图表会自动响应刷新，无需手动触发重绘。

方案2：手动触发图表重绘 #

若坚持使用值转换器，可通过获取图表实例，手动调用InvalidateSurface()触发重绘：

1. 在XAML中给图表命名：

<chart:SfCartesianChart x:Name="MyChart" Series="{Binding DataSeries, Converter={StaticResource DataSeriesConverter}}">
     <!-- 轴配置保持不变 -->
 </chart:SfCartesianChart>

2. 在页面代码-behind中订阅ViewModel的PropertyChanged事件：

public ChartPage()
{
    InitializeComponent();
    if (BindingContext is ChartPageViewModel vm)
    {
        vm.PropertyChanged += (s, e) =>
        {
            if (e.PropertyName == nameof(vm.DataSeries))
            {
                // 延迟触发确保转换器完成转换
                Dispatcher.DispatchAsync(() => MyChart.InvalidateSurface());
            }
        };
    }
}

额外注意事项 #

• 确保DataSeries的PropertyChanged事件正确触发：通过MVVM框架的SetProperty方法赋值，而非直接给字段赋值。
• 若子项数据会动态变更，将IList<IChartPointViewModel>替换为ObservableCollection<IChartPointViewModel>，让数据源变更时图表自动更新。

内容的提问来源于stack exchange，提问作者Christoph