Enterprise-level component library based on Bootstrap and Blazor

star nuget license download repo commit master coverage

通过设置 ChartType 更改图表为 pie

Loading ...
@page "/charts/pie"

<DemoBlock Title="Pie 图" Introduction="通过设置 <code>ChartType</code> 更改图表为 <code>pie</code> 图" Name="Pie">
    <Chart ChartType="ChartType.Pie" OnInitAsync="@OnInit" OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" @ref="PieChart" />
    <div class="text-center mt-2 chart">
        <div class="btn-group">
            <button class="btn btn-primary" @onclick="e => Utility.RandomData(PieChart)"><i class="fa fa-pie-chart"></i><span>随机数据</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(PieChart, ref PieDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(PieChart, ref PieDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.AddData(PieChart, ref PieDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.RemoveData(PieChart, ref PieDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
    <BlockLogger @ref="Logger" class="mt-3" />

<ChartToast />
// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

using BootstrapBlazor.Components;
using BootstrapBlazor.Shared.Components;
using System;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Samples.Charts;

/// <summary>
/// </summary>
public partial class Pie
    private Random Randomer { get; } = new Random();
    private int PieDatasetCount = 1;
    private int PieDataCount = 5;

    private Chart? PieChart { get; set; }

    private BlockLogger? Logger { get; set; }

    /// <summary>
    /// </summary>
    /// <param name="firstRender"></param>
    protected override void OnAfterRender(bool firstRender)

        if (firstRender)
            Logger.Log("Pie 正在加载数据 ...");

    private Task OnAfterInit()
        Logger.Log("Pie 初始化完毕");
        return Task.CompletedTask;

    private Task OnAfterUpdate(ChartAction action)
        Logger.Log($"Pie 图更新数据操作完毕 -- {action}");
        return Task.CompletedTask;

    private Task<ChartDataSource> OnInit()
        var ds = new ChartDataSource();
        ds.Options.Title = "Pie 饼图";
        ds.Labels = Utility.Colors.Take(PieDataCount);
        for (var index = 0; index < PieDatasetCount; index++)
            ds.Data.Add(new ChartDataset()
                Label = $"数据集 {index}",
                Data = Enumerable.Range(1, PieDataCount).Select(i => Randomer.Next(20, 37)).Cast<object>()
        return Task.FromResult(ds);

B 站相关视频链接



QQ Group:BootstrapAdmin & Blazor 795206915 675147445 Welcome to join the group discussion
Ant Design (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload