Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

使用 OnInit 回调委托方法,对初始化数据进行赋值后,即可进行绘图操作

Demo
Loading ...

使用设置 ChartDataset 实例的 Tension 参数,调整折线的曲率,默认位 0.4f

Demo
Loading ...

使用设置 ChartDataset 实例的 Data 参数中含 null,折线图使用虚线连接

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

<Block Title="Line 图" Introduction="使用 <code>OnInit</code> 回调委托方法,对初始化数据进行赋值后,即可进行绘图操作">
    <Chart @ref="LineChart" OnInitAsync="() => OnInit(0.4f, false)" OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" />
    <div class="text-center mt-2 chart">
        <div class="btn-group">
            <button class="btn btn-primary" @onclick="e => Utility.RandomData(LineChart)"><i class="fa fa-line-chart"></i><span>随机数据</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.AddDataSet(LineChart, ref LineDatasetCount)"><i class="fa fa-plus-circle"></i><span>添加数据集</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(LineChart, ref LineDatasetCount)"><i class="fa fa-minus-circle"></i><span>移除数据集</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.AddData(LineChart, ref LineDataCount)"><i class="fa fa-plus"></i><span>添加数据</span></button>
            <button class="btn btn-primary" @onclick="e => Utility.RemoveData(LineChart, ref LineDataCount)"><i class="fa fa-minus"></i><span>移除数据</span></button>
        </div>
    </div>
    <BlockLogger @ref="Logger" class="mt-3" />
</Block>

<Block Title="Line 图" Introduction="使用设置 <code>ChartDataset</code> 实例的 <code>Tension</code> 参数,调整折线的曲率,默认位 <b>0.4f</b>">
    <Chart OnInitAsync="() => OnInit(0f, false)" />
</Block>

<Block Title="Line 图" Introduction="使用设置 <code>ChartDataset</code> 实例的 <code>Data</code> 参数中含 <code>null</code>,折线图使用虚线连接">
    <Chart OnInitAsync="() => OnInit(0f, 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.Diagnostics.CodeAnalysis;
using System.Linq;
using System.Threading.Tasks;

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

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

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

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

        private Task<ChartDataSource> OnInit(float tension, bool hasNull)
        {
            var ds = new ChartDataSource();
            ds.Options.Title = "Line 折线图";
            ds.Options.X.Title = "天数";
            ds.Options.Y.Title = "数值";
            ds.Labels = Enumerable.Range(1, LineDataCount).Select(i => i.ToString());
            for (var index = 0; index < LineDatasetCount; index++)
            {
                ds.Data.Add(new ChartDataset()
                {
                    Tension = tension,
                    Label = $"数据集 {index}",
                    Data = Enumerable.Range(1, LineDataCount).Select((i, index) => (index == 2 && hasNull) ? null! : (object)Randomer.Next(20, 37))
                });
            }
            return Task.FromResult(ds);
        }
    }
}

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