
Change the chart to a bubble
chart by setting ChartType
Demo
Setting the height and width will automatically disable the constraint chart ratio, and the chart will fill the container
Demo
@page "/charts/bubble"
@inject IStringLocalizer<Bubble> Localizer
<DemoBlock Title="@Localizer["P1"]" Introduction="@Localizer["P2"]" Name="Bubble">
<Chart ChartType="ChartType.Bubble" OnInitAsync="@OnInit" OnAfterInitAsync="@OnAfterInit" OnAfterUpdateAsync="@OnAfterUpdate" @ref="BubbleChart" />
<div class="text-center mt-2 chart">
<div class="btn-group">
<button class="btn btn-primary" @onclick="e => Utility.RandomData(BubbleChart)"><i class="fa-regular fa-snowflake"></i><span>@Localizer["P3"]</span></button>
<button class="btn btn-primary" @onclick="OnReloadChart"><i class="fa-solid fa-chart-column"></i><span>@Localizer["Reload"]</span></button>
<button class="btn btn-primary" @onclick="e => Utility.AddDataSet(BubbleChart, ref BubbleDatasetCount)"><i class="fa-solid fa-circle-plus"></i><span>@Localizer["P4"]</span></button>
<button class="btn btn-primary" @onclick="e => Utility.RemoveDataSet(BubbleChart, ref BubbleDatasetCount)"><i class="fa-solid fa-circle-minus"></i><span>@Localizer["P5"]</span></button>
<button class="btn btn-primary" @onclick="e => Utility.AddData(BubbleChart, ref BubbleDataCount)"><i class="fa-solid fa-plus"></i><span>@Localizer["P6"]</span></button>
<button class="btn btn-primary" @onclick="e => Utility.RemoveData(BubbleChart, ref BubbleDataCount)"><i class="fa-solid fa-minus"></i><span>@Localizer["P7"]</span></button>
</div>
</div>
<BlockLogger @ref="Logger" class="mt-3" />
</DemoBlock>
<DemoBlock Title="@Localizer["AspectRatio"]" Introduction="@Localizer["AspectRatioIntro"]" Name="BarAspectRatio">
<Chart ChartType="ChartType.Bar" OnInitAsync="@OnInit" Height="500px" Width="300px" />
</DemoBlock>
// 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/
namespace BootstrapBlazor.Shared.Samples.Charts;
/// <summary>
///
/// </summary>
public partial class Bubble
{
private Random Randomer { get; } = new Random();
private int BubbleDatasetCount = 2;
private int BubbleDataCount = 7;
[NotNull]
private Chart? BubbleChart { 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("Bubble is loading data ...");
}
}
private Task OnAfterInit()
{
Logger.Log("Bubble is initialized");
return Task.CompletedTask;
}
private Task OnAfterUpdate(ChartAction action)
{
Logger.Log($"Bubble graph update data operation completed -- {action}");
return Task.CompletedTask;
}
private Task<ChartDataSource> OnInit()
{
var ds = new ChartDataSource
{
Labels = Enumerable.Range(1, BubbleDataCount).Select(i => i.ToString())
};
ds.Options.Title = "Bubble chart";
for (var index = 0; index < BubbleDatasetCount; index++)
{
ds.Data.Add(new ChartDataset()
{
Label = $"Set {index}",
Data = Enumerable.Range(1, BubbleDataCount).Select(i => new
{
x = Randomer.Next(10, 40),
y = Randomer.Next(10, 40),
r = Randomer.Next(1, 20)
})
});
}
return Task.FromResult(ds);
}
/// <summary>
/// 强刷控件,重新初始化控件外观
/// </summary>
private Task OnReloadChart()
{
BubbleDataCount = Randomer.Next(5, 15);
BubbleChart?.Reload();
return Task.CompletedTask;
}
}