
Bar 图
通过设置 ChartType
更改图表为 bar
图
Demo
Loading ...
Bar 图
通过设置 X/Y 轴 Stacked
属性,控制是否堆砌排列
Demo
Loading ...
@page "/charts/bar"
<DemoBlock Title="Bar 图" Introduction="通过设置 <code>ChartType</code> 更改图表为 <code>bar</code> 图" Name="BarType">
<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" />
</DemoBlock>
<DemoBlock Title="Bar 图" Introduction="通过设置 X/Y 轴 <code>Stacked</code> 属性,控制是否堆砌排列" Name="BarStacked">
<Chart ChartType="ChartType.Bar" OnInitAsync="() => OnInit(true)" />
</DemoBlock>
<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;
namespace BootstrapBlazor.Shared.Samples.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();
}