Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Bar 图

通过设置 ChartType 更改图表为 bar

Demo
Loading ...

Bar 图

通过设置 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>
    <Logger @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 Logger? 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群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload