Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

通过设置 ChartType 更改图表为 doughnut

Demo
Loading ...
@page "/charts/doughnut"

<Block Title="Doughnut 图" Introduction="通过设置 <code>ChartType</code> 更改图表为 <code>doughnut</code> 图">
    <Chart ChartType="ChartType.Doughnut" Angle="@Angle" OnInitAsync="@OnInit" OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" @ref="DoughnutChart" class="pie" />
    <div class="text-center mt-2 chart">
        <div class="btn-group">
            <button class="btn btn-primary" @onclick="e => Utility.RandomData(DoughnutChart)"><i class="fa fa-slack"></i><span>随机数据</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(DoughnutChart, ref DoughnutDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(DoughnutChart, ref DoughnutDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.AddData(DoughnutChart, ref DoughnutDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.RemoveData(DoughnutChart, ref DoughnutDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
            <button class="btn btn-primary" @onclick="@ToggleCircle"><i class="fa fa-circle-o-notch"></i><span>半圆/全圆</span></button>
        </div>
    </div>
    <BlockLogger @ref="Logger" class="mt-3" />
</Block>

<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.Pages.Components;
using System;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages.Charts
{
    /// <summary>
    /// 
    /// </summary>
    public partial class Doughnut
    {
        private Random Randomer { get; } = new Random();
        private int DoughnutDatasetCount = 1;
        private int DoughnutDataCount = 5;

        [NotNull]
        private Chart? DoughnutChart { get; set; }

        [NotNull]
        private BlockLogger? Logger { get; set; }

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

            if (firstRender)
            {
                Logger.Log("Doughnut 正在加载数据 ...");
            }
        }

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

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

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

        private bool IsCircle { get; set; }
        private int Angle { get; set; }
        private async Task ToggleCircle()
        {
            IsCircle = !IsCircle;
            Angle = IsCircle ? 360 : 0;
            await DoughnutChart.Update(ChartAction.SetAngle);
        }
    }
}

B 站相关视频链接

暂无

交流群

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