.NET MAUI中LiveCharts柱状图绘制失败求助及替代方案咨询

问题说明 #

我正在开发一个.NET MAUI应用，点击按钮时从指定接口获取猴子数据，想用LiveChartsCore.SkiaSharpView绘制柱状图——X轴显示猴子名称，Y轴显示种群数量。数据能正常获取（用列表显示没问题），但柱状图始终绘制不出来，问题出在ColumnSeries相关逻辑上，求解决，同时想了解其他可用的绘图方法。

后台代码 #

private List<Monkey> monkeys;

// 图表相关属性
public ISeries[] Series { get; set; } =
{
    new ColumnSeries<double>
    {
        Values = new ChartValues<double>(),
        Fill = new SolidColorPaint(SKColors.BlueViolet)
    }
};
public Axis[] XAxes { get; set; } =
{
    new Axis
    {
        Name = "Monkey Names",
        Labels = new string[] { }
    }
};
public Axis[] YAxes { get; set; } =
{
    new Axis
    {
        Name = "Monkeys Population",
        Labels = new string[] { }
    }
};

public MainPage()
{
    BindingContext = this;
    InitializeComponent();
}

private async void FetchDataButton_Clicked(object sender, EventArgs e)
{
    try
    {
        var httpClient = new HttpClient();
        var url = "https://montemagno.com/monkeys.json";
        var response = await httpClient.GetAsync(url);
        monkeys = await response.Content.ReadFromJsonAsync<List<Monkey>>();

        var chartValues = new ChartValues<double>();
        var labels = new string[monkeys.Count];
        
        int i = 0;
        foreach (var monkey in monkeys)
        {
            chartValues.Add(monkey.Population);
            labels[i] = monkey.Name;
            i++;
        }
        Series[0].Values = chartValues;
        XAxes[0].Labels = labels;
        PopulationChart.IsVisible = true;
    }
    catch (Exception ex)
    {
        await DisplayAlert("Error", "An error occured while fetching data", "OK");
    }
}

public class Monkey
{
    public string Name { get; set; }
    public double Population { get; set; }
}

XAML代码 #

<ContentPage.Content>
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <Button Grid.Row="0"
                x:Name="FetchDataButton" 
                Text="Fetch Data" 
                Clicked="FetchDataButton_Clicked"/>

        <lvc:CartesianChart Grid.Row="1"
                            x:Name="PopulationChart"
                            IsVisible="False"
                            Series="{Binding Series}"
                            YAxes="{Binding YAxes}"
                            XAxes="{Binding XAxes}">
        </lvc:CartesianChart>

    </Grid>
</ContentPage.Content>

问题解决方法 #

核心问题是数据更新后没有通知UI刷新：Series、XAxes等属性是普通数组，未实现INotifyPropertyChanged接口，修改数组元素的属性后，绑定无法感知到变化，导致图表不更新。

修复步骤（推荐方案：使用MVVM工具包） #

1. 安装NuGet包CommunityToolkit.Mvvm，利用ObservableObject自动实现属性变更通知。
2. 将图表相关属性改为可通知的绑定属性，更新数据时重新赋值触发UI刷新。

修改后的后台代码：

using CommunityToolkit.Mvvm.ComponentModel;

public partial class MainPage : ContentPage, ObservableObject
{
    private List<Monkey> monkeys;

    [ObservableProperty]
    private ISeries[] series =
    {
        new ColumnSeries<double>
        {
            Values = new ChartValues<double>(),
            Fill = new SolidColorPaint(SKColors.BlueViolet)
        }
    };

    [ObservableProperty]
    private Axis[] xAxes =
    {
        new Axis
        {
            Name = "Monkey Names",
            Labels = new string[] { }
        }
    };

    [ObservableProperty]
    private Axis[] yAxes =
    {
        new Axis
        {
            Name = "Monkeys Population",
            Labels = new string[] { }
        }
    };

    public MainPage()
    {
        BindingContext = this;
        InitializeComponent();
    }

    private async void FetchDataButton_Clicked(object sender, EventArgs e)
    {
        try
        {
            var httpClient = new HttpClient();
            var url = "https://montemagno.com/monkeys.json";
            var response = await httpClient.GetAsync(url);
            monkeys = await response.Content.ReadFromJsonAsync<List<Monkey>>();

            var chartValues = new ChartValues<double>();
            var labels = new string[monkeys.Count];
            
            int i = 0;
            foreach (var monkey in monkeys)
            {
                chartValues.Add(monkey.Population);
                labels[i] = monkey.Name;
                i++;
            }

            // 重新赋值数组，触发属性变更通知
            Series = new[]
            {
                new ColumnSeries<double>
                {
                    Values = chartValues,
                    Fill = new SolidColorPaint(SKColors.BlueViolet)
                }
            };

            XAxes = new[]
            {
                new Axis
                {
                    Name = "Monkey Names",
                    Labels = labels
                }
            };

            PopulationChart.IsVisible = true;
        }
        catch (Exception ex)
        {
            await DisplayAlert("Error", "An error occured while fetching data", "OK");
        }
    }

    public class Monkey
    {
        public string Name { get; set; }
        public double Population { get; set; }
    }
}

其他绘图方法推荐 #

除LiveChartsCore.SkiaSharpView外，.NET MAUI中常用的绘图库还有：

• OxyPlot.Maui：开源老牌绘图库，支持多种图表类型，文档完善，社区活跃。
• Syncfusion.Maui.Charts：商业库（提供免费社区版），UI设计美观，内置交互功能丰富，适合企业级应用。
• Telerik UI for .NET MAUI：商业组件库，图表功能全面，与.NET MAUI集成度高。

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