Blazor集成Chart.js时如何将自定义配置类转为JS可识别合法对象

核心逻辑：Blazor和JS交互时，C#对象会被默认序列化为JSON，只要自定义类的结构、属性命名和Chart.js要求的配置结构完全对齐，就能直接传入JS方法使用，不需要额外转换，你现有的mychart.js代码不需要做任何修改。

步骤1：配置序列化规则，统一命名格式 #

C#默认使用帕斯卡命名（首字母大写），而Chart.js配置要求驼峰命名（首字母小写），可以二选一处理：

• 方案1：给每个属性加[JsonPropertyName]特性指定序列化后的名称，枚举值也可以通过特性指定映射的小写字符串
• 方案2：调用JSRuntime时传入全局序列化配置，自动转换为驼峰命名，同时把枚举序列化为小写字符串，不需要给单个属性加特性：

var jsonOptions = new JsonSerializerOptions
{
    PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
    Converters = { new JsonStringEnumConverter(JsonNamingPolicy.CamelCase) }
};
// 调用时传入序列化选项即可
await JSRuntime.InvokeVoidAsync("setup", jsonOptions, Config.CanvasId, Config);

如果选择方案1，先给ChartType枚举加配置：

using System.Text.Json.Serialization;

[JsonConverter(typeof(JsonStringEnumConverter))]
public enum ChartType
{
    [JsonPropertyName("pie")]
    Pie,
    [JsonPropertyName("bar")]
    Bar
}

步骤2：补全层级对应的配置类 #

按照Chart.js的配置层级定义对应的C#类，支持堆叠柱状图的示例结构如下：

// 基础配置类
public abstract class ChartConfigBase
{
    protected ChartConfigBase(ChartType type)
    {
        Type = type;
    }

    [JsonPropertyName("type")]
    public ChartType Type { get; }

    [JsonPropertyName("options")]
    public ChartOptions Options { get; set; } = new();

    [JsonPropertyName("data")]
    public ChartData Data { get; set; } = new();

    public string CanvasId { get; } = Guid.NewGuid().ToString();
}

// 柱状图专用配置类
public class BarChartConfig : ChartConfigBase
{
    public BarChartConfig() : base(ChartType.Bar)
    {
        // 默认开启堆叠效果
        Options.Scales = new ChartScales
        {
            X = new ChartAxis { Stacked = true },
            Y = new ChartAxis { Stacked = true }
        };
    }
}

// 以下是各级依赖配置类
public class ChartOptions
{
    [JsonPropertyName("responsive")]
    public bool Responsive { get; set; } = true;

    [JsonPropertyName("scales")]
    public ChartScales Scales { get; set; }
}

public class ChartScales
{
    [JsonPropertyName("x")]
    public ChartAxis X { get; set; }

    [JsonPropertyName("y")]
    public ChartAxis Y { get; set; }
}

public class ChartAxis
{
    [JsonPropertyName("stacked")]
    public bool Stacked { get; set; }

    [JsonPropertyName("ticks")]
    public ChartTicks Ticks { get; set; } = new();
}

public class ChartTicks
{
    [JsonPropertyName("beginAtZero")]
    public bool BeginAtZero { get; set; } = true;
}

public class ChartData
{
    [JsonPropertyName("labels")]
    public List<string> Labels { get; set; } = new();

    [JsonPropertyName("datasets")]
    public List<ChartDataset> Datasets { get; set; } = new();
}

public class ChartDataset
{
    [JsonPropertyName("data")]
    public List<int> Data { get; set; } = new();

    [JsonPropertyName("backgroundColor")]
    public List<string> BackgroundColor { get; set; } = new();

    [JsonPropertyName("label")]
    public string Label { get; set; }

    // 堆叠分组专属属性
    [JsonPropertyName("stack")]
    public string StackGroup { get; set; }
}

步骤3：改造Chart组件直接接收配置参数 #

修改Chart.razor代码，取消零散参数，直接传入配置对象：

@inject IJSRuntime JSRuntime
@using System.Text.Json

<canvas id="@Config.CanvasId"></canvas>

@code {
    [Parameter, EditorRequired]
    public ChartConfigBase Config { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var jsonOptions = new JsonSerializerOptions
            {
                PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
                Converters = { new JsonStringEnumConverter(JsonNamingPolicy.CamelCase) }
            };
            await JSRuntime.InvokeVoidAsync("setup", jsonOptions, Config.CanvasId, Config);
        }
    }
}

步骤4：堆叠柱状图调用示例 #

<Chart Config="@_barConfig" />

@code {
    private BarChartConfig _barConfig = new();

    protected override void OnInitialized()
    {
        // 配置X轴标签
        _barConfig.Data.Labels = new List<string> { "1月", "2月", "3月" };
        
        // 第一堆叠组数据
        _barConfig.Data.Datasets.Add(new ChartDataset
        {
            Label = "产品A销量",
            StackGroup = "销售组",
            Data = new List<int> { 10, 20, 30 },
            BackgroundColor = new List<string> { "#ff4444" }
        });
        _barConfig.Data.Datasets.Add(new ChartDataset
        {
            Label = "产品B销量",
            StackGroup = "销售组",
            Data = new List<int> { 15, 25, 35 },
            BackgroundColor = new List<string> { "#00C851" }
        });
        
        // 第二堆叠组数据
        _barConfig.Data.Datasets.Add(new ChartDataset
        {
            Label = "产品A退款",
            StackGroup = "退款组",
            Data = new List<int> { 2, 3, 1 },
            BackgroundColor = new List<string> { "#ffcccc" }
        });
    }
}

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