如何在.NET 8 MAUI的LiveCharts图表中自定义各系列颜色

我正在使用.NET 8、MAUI开发应用程序，同时使用LiveCharts组件，整体效果不错。但生成图表时，图表的颜色是随机的。例如，我使用以下C#代码：

using System.Collections.Generic;
using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using CommunityToolkit.Mvvm.ComponentModel;
using LiveChartsCore.SkiaSharpView.Extensions;
using LiveChartsCore.Defaults;
using LiveChartsCore.Measure;

namespace ViewModelsSamples.Pies.Gauge3;

public partial class ViewModel : ObservableObject
{
    public IEnumerable<ISeries> Series { get; set; } =
        GaugeGenerator.BuildSolidGauge(
            new GaugeItem(30, series => SetStyle("Vanessa", series)),
            new GaugeItem(50, series => SetStyle("Charles", series)),
            new GaugeItem(70, series => SetStyle("Ana", series)),
            new GaugeItem(GaugeItem.Background, series =>
            {
                series.InnerRadius = 20;
            }));

    public static void SetStyle(string name, PieSeries<ObservableValue> series)
    {
        series.Name = name;
        series.DataLabelsPosition = PolarLabelsPosition.Start;
        series.DataLabelsFormatter =
                point => $"{point.Coordinate.PrimaryValue} {point.Context.Series.Name}";
        series.InnerRadius = 20;
        series.RelativeOuterRadius = 8;
        series.RelativeInnerRadius = 8;
    }
}

对应的XAML代码：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="MauiSample.Pies.Gauge3.View"
             xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:lvc="clr-namespace:LiveChartsCore.SkiaSharpView.Maui;assembly=LiveChartsCore.SkiaSharpView.Maui"
             xmlns:vms="clr-namespace:ViewModelsSamples.Pies.Gauge3;assembly=ViewModelsSamples">
    <ContentPage.BindingContext>
        <vms:ViewModel/>
    </ContentPage.BindingContext>
    <lvc:PieChart
        Series="{Binding Series}"
        InitialRotation="45"
        MaxAngle="270"
        MinValue="0"
        MaxValue="100">
    </lvc:PieChart>
</ContentPage>

生成的图表效果：

请问如何为该图表及每个系列设置自定义颜色？

LiveCharts提供两种常用方式设置自定义颜色，可按需选择：

1. 为单个系列指定颜色 #

直接给每个PieSeries设置Fill属性，使用SkiaSharp的SKColor定义颜色，有两种实现方式：

方式A：修改SetStyle方法按名称分配颜色 #

引入SkiaSharp命名空间后，在SetStyle方法中添加颜色逻辑：

using SkiaSharp;

public static void SetStyle(string name, PieSeries<ObservableValue> series)
{
    series.Name = name;
    series.DataLabelsPosition = PolarLabelsPosition.Start;
    series.DataLabelsFormatter =
            point => $"{point.Coordinate.PrimaryValue} {point.Context.Series.Name}";
    series.InnerRadius = 20;
    series.RelativeOuterRadius = 8;
    series.RelativeInnerRadius = 8;

    // 按名称设置自定义颜色
    switch (name)
    {
        case "Vanessa":
            series.Fill = new SKColor(255, 99, 132); // 粉红色
            break;
        case "Charles":
            series.Fill = new SKColor(54, 162, 235); // 蓝色
            break;
        case "Ana":
            series.Fill = new SKColor(75, 192, 192); // 青色
            break;
    }
}

方式B：创建GaugeItem时直接设置 #

在构建GaugeItem的回调中直接指定颜色：

public IEnumerable<ISeries> Series { get; set; } =
    GaugeGenerator.BuildSolidGauge(
        new GaugeItem(30, series => 
        {
            SetStyle("Vanessa", series);
            ((PieSeries<ObservableValue>)series).Fill = new SKColor(255, 99, 132);
        }),
        new GaugeItem(50, series => 
        {
            SetStyle("Charles", series);
            ((PieSeries<ObservableValue>)series).Fill = new SKColor(54, 162, 235);
        }),
        new GaugeItem(70, series => 
        {
            SetStyle("Ana", series);
            ((PieSeries<ObservableValue>)series).Fill = new SKColor(75, 192, 192);
        }),
        new GaugeItem(GaugeItem.Background, series =>
        {
            series.InnerRadius = 20;
            ((PieSeries<ObservableValue>)series).Fill = new SKColor(240, 240, 240); // 背景色
        }));

2. 设置全局颜色调色板 #

如果希望所有系列统一使用一套自定义颜色，可在应用启动时配置LiveCharts全局调色板：

在MauiProgram.cs中添加配置：

using LiveChartsCore;
using LiveChartsCore.SkiaSharpView;
using SkiaSharp;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            });

        // 配置LiveCharts全局调色板
        LiveCharts.Configure(config =>
            config
                .AddSkiaSharp()
                .AddDefaultMappers()
                // 自定义颜色集合，系列会按顺序取用
                .SetGlobalPalette(
                    new SKColor(255, 99, 132),
                    new SKColor(54, 162, 235),
                    new SKColor(75, 192, 192),
                    new SKColor(255, 206, 86),
                    new SKColor(153, 102, 255)));

        return builder.Build();
    }
}

全局调色板会自动应用到所有系列，若单个系列需要特殊颜色，单独设置Fill属性会覆盖全局配置。

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