Blazorise派图表组件

Question

我是Blazorise图组件的初学者，我使用Blazorise和Im，但是我正在寻找实现Blazorise图表组件，对于如何实现它有任何想法。没有任何例子

Answer 1

您可以尝试将其作为启动示例并根据应用程序进行修改：

<Chart @ref="pieChart" Type="ChartType.Pie" TItem="double" Options="@chartOptions" />
<Button Color="Color.Primary" Outline Clicked="@(async () => await HandleRedraw( pieChart, GetPieChartDataset ))">Redraw</Button>

@code {
    private Chart<double> pieChart;

    ChartOptions chartOptions = new() { AspectRatio = 1.5 };

    private string[] Labels = { "Red", "Blue", "Yellow", "Green", "Purple", "Orange" };
    private List<string> backgroundColors = new() { ChartColor.FromRgba(255, 99, 132, 0.2f), ChartColor.FromRgba(54, 162, 235, 0.2f), ChartColor.FromRgba(255, 206, 86, 0.2f), ChartColor.FromRgba(75, 192, 192, 0.2f), ChartColor.FromRgba(153, 102, 255, 0.2f), ChartColor.FromRgba(255, 159, 64, 0.2f) };
    private List<string> borderColors = new() { ChartColor.FromRgba(255, 99, 132, 1f), ChartColor.FromRgba(54, 162, 235, 1f), ChartColor.FromRgba(255, 206, 86, 1f), ChartColor.FromRgba(75, 192, 192, 1f), ChartColor.FromRgba(153, 102, 255, 1f), ChartColor.FromRgba(255, 159, 64, 1f) };
  
    private bool isAlreadyInitialised;

    private Random random = new(DateTime.Now.Millisecond);
  
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (!isAlreadyInitialised)
        {
            isAlreadyInitialised = true;

            await HandleRedraw(pieChart, GetPieChartDataset);
        }
    }

    private async Task HandleRedraw<TDataSet, TItem, TOptions, TModel>(Blazorise.Charts.BaseChart<TDataSet, TItem, TOptions, TModel> chart, Func<TDataSet> getDataSet)
        where TDataSet : ChartDataset<TItem>
        where TOptions : ChartOptions
        where TModel : ChartModel
    {
        await chart.Clear();

        await chart.AddLabelsDatasetsAndUpdate(Labels, getDataSet());
    }
    
    private int pieLabel;

    private PieChartDataset<double> GetPieChartDataset()
    {
        return new()
        {
            Label = $"#{++pieLabel} of randoms",
            Data = RandomizeData(),
            BackgroundColor = backgroundColors,
            BorderColor = borderColors,
            BorderWidth = 1
        };
    }

    List<double> RandomizeData() => RandomizeData(3, 50);

    List<double> RandomizeData(int min, int max)
    {
        return Enumerable.Range(0, 6).Select(x => random.Next(min, max) * random.NextDouble()).ToList();
    }
}

您可以在Blazorise.Demo项目中找到更多关于所有Blazorise组件的示例，您可以在GitHub：https://github.com/Megabit/Blazorise/tree/master/Demos/Blazorise.Demo/Pages/Tests上找到这些示例