将Blazor与Chart.js集成:如何传递对象

@page "/chart"

@inject IJSRuntime JSRuntime

<h3>Chart</h3>

<canvas id="chartCanvas"></canvas>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("createChart", GetData());
        }
    }

    private object GetData()
    {
        // 获取需要传递给Chart.js的数据对象
        var data = new
        {
            labels = new[] { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" },
            datasets = new[]
            {
                new
                {
                    label = "Dataset",
                    data = new[] { 12, 19, 3, 5, 2, 3 },
                    backgroundColor = new[] { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" }
                }
            }
        };

        return data;
    }
}

function createChart(data) {
    var ctx = document.getElementById('chartCanvas').getContext('2d');
    new Chart(ctx, {
        type: 'bar',
        data: data,
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
}