mapo-core/MP.IOC/Components/ChartJS/BarPlot.razor

@using MP.Data
@inject IJSRuntime JSRuntime

<canvas id="@Id"></canvas>

@code {
    [Parameter]
    public string Id { get; set; } = "MyHist";

    [Parameter]
    public string Legenda { get; set; } = "Legenda";

    [Parameter]
    public bool Horizontal { get; set; } = false;

    [Parameter]
    public List<double> Data { get; set; } = new List<double>();

    [Parameter]
    public List<string> Labels { get; set; } = new List<string>();

    [Parameter]
    public double AspRatio { get; set; } = 0;

    [Parameter]
    public List<string> lineColor { get; set; } = new List<string>();

    [Parameter]
    public List<string> backColor { get; set; } = new List<string>();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await renderChart();
    }


    /// <summary>
    /// Inizializzazione rendering componente
    ///
    /// partendo da qui:
    /// https://www.williamleme.com/posts/2020/003-chartjs-blazor/
    /// https://www.puresourcecode.com/dotnet/blazor/using-chart-js-with-blazor/
    /// https://www.tutorialsteacher.com/csharp/csharp-anonymous-type
    /// </summary>
    /// <returns></returns>
    protected async Task renderChart()
    {
        // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js, tipo verticale
        var config = new
        {
            type = "bar",
            options = new
            {
                responsive = true,
                scales = new
                {
                    y = new
                    {
                        suggestedMin = 0,
                        display = true,
                        ticks = new
                        {
                            beginAtZero = true,
                            maxTicksLimit = 10
                        }
                    }
                },
                Animation = false,
                AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}"
            },
            data = new
            {
                datasets = new[] {
                        new {
                            data = Data,
                            borderColor = lineColor,
                            backgroundColor = backColor,
                            borderWidth = 1,
                            label = Legenda
                        }
                    },
                labels = Labels
            }
        };
        // creazione di un oggetto anonymous type con tutte le opzioni da passare a chart.js, tipo orizzontale
        var configHor = new
        {
            type = "bar",
            options = new
            {
                indexAxis = "y",
                responsive = true,
                scales = new
                {
                    yAxes = new
                    {
                        suggestedMin = 0,
                        display = true,
                        ticks = new
                        {
                            beginAtZero = true,
                            maxTicksLimit = 10
                        }
                    }
                },
                Animation = false,
                AspectRatio = AspRatio == 0 ? "auto" : $"{AspRatio}"
            },
            data = new
            {
                datasets = new[] {
                        new {
                            data = Data,
                            borderColor = lineColor,
                            backgroundColor = backColor,
                            borderWidth = 1,
                            label = Legenda
                        }
                    },
                labels = Labels
            }
        };
        await Task.Delay(50);
        if (Horizontal)
        {
            await JSRuntime.InvokeVoidAsync("setup", Id, configHor);
        }
        else
        {
            await JSRuntime.InvokeVoidAsync("setup", Id, config);
        }
    }
}