Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

通过设置 ChartType 更改图表为 bar

Demo
Loading ...

通过设置 X/Y 轴 Stacked 属性,控制是否堆砌排列

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

<Block Title="Bar 图" Introduction="通过设置 <code>ChartType</code> 更改图表为 <code>bar</code> 图">
    <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInit(false)" OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" @ref="BarChart" />
    <div class="text-center mt-2 chart">
        <div class="btn-group">
            <button class="btn btn-info" data-method="play" @onclick="@OnPlayChart">
                <i class="fa fa-play-circle"></i>
                <span>开启动画</span>
            </button>
            <button class="btn btn-info" data-method="stop" @onclick="@OnStopChart">
                <i class="fa fa-stop-circle"></i>
                <span>关闭动画</span>
            </button>
        </div>
    </div>
    <div class="text-center mt-2 chart">
        <div class="btn-group">
            <button class="btn btn-primary" @onclick="e => Utility.RandomData(BarChart)"><i class="fa fa-bar-chart"></i><span>随机数据</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(BarChart, ref BarDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(BarChart, ref BarDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.AddData(BarChart, ref BarDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.RemoveData(BarChart, ref BarDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
        </div>
    </div>
    <BlockLogger @ref="Logger" class="mt-3" />
</Block>

<Block Title="Bar 图" Introduction="通过设置 X/Y 轴 <code>Stacked</code> 属性,控制是否堆砌排列">
    <Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInit(true)" />
</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.Collections.Generic;
using System.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;

namespace BootstrapBlazor.Shared.Pages.Charts
{
    /// <summary>
    /// 
    /// </summary>
    public partial class Bar
    {
        private Random Randomer { get; } = new Random();
        private int BarDatasetCount = 2;
        private int BarDataCount = 7;

        [NotNull]
        private Chart? BarChart { 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("Bar 正在加载数据 ...");
            }
        }

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

        private Task OnAfterUpdate(ChartAction action) => InvokeAsync(() => Logger.Log($"Bar 图更新数据操作完毕 -- {action}"));

        private Task<ChartDataSource> OnInit(bool stacked)
        {
            var ds = new ChartDataSource();
            ds.Options.Title = "Bar 折线图";
            ds.Options.X.Title = "天数";
            ds.Options.Y.Title = "数值";
            ds.Options.X.Stacked = stacked;
            ds.Options.Y.Stacked = stacked;
            ds.Labels = Enumerable.Range(1, BarDataCount).Select(i => i.ToString());
            for (var index = 0; index < BarDatasetCount; index++)
            {
                ds.Data.Add(new ChartDataset()
                {
                    Label = $"数据集 {index}",
                    Data = Enumerable.Range(1, BarDataCount).Select(i => Randomer.Next(20, 37)).Cast<object>()
                });
            }
            return Task.FromResult(ds);
        }

        private CancellationTokenSource _chartCancellationTokenSource = new();

        private Task OnPlayChart()
        {
            _chartCancellationTokenSource = new CancellationTokenSource();
            return Task.Run(async () =>
            {
                while (!_chartCancellationTokenSource.IsCancellationRequested)
                {
                    await Task.Delay(800, _chartCancellationTokenSource.Token);
                    if (!_chartCancellationTokenSource.IsCancellationRequested) await Utility.RandomData(BarChart);
                }
            });
        }

        private void OnStopChart() => _chartCancellationTokenSource.Cancel();
    }
}

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