BootstrapBlazor组件 Chart 图表介绍 通过给定数据，绘画各种图表的组件
本文主要介绍三种图表使用:折线图,柱状图,饼图

文章图片


文章图片


文章图片

1.新建工程 新建工程b06chart,使用 nuget.org 进行 BootstrapBlazor 组件安装, Chart 库,字体. 将项目添加到解决方案中

dotnet new blazorserver -o b06chart dotnet add b06chart package BootstrapBlazor dotnet add b06chart package BootstrapBlazor.FontAwesome dotnet add b06chart package BootstrapBlazor.Chart dotnet sln add b06chart/b06chart.csproj

2.样式表和Javascript 引用 增加主题样式表到 Pages/_Layout.cshtml 文件中
删除
并在下面添加三行

添加 Javascript 引用到 Pages/_Layout.cshtml 文件中
在 之前添加

3.添加增加命名空间引用到 _Imports.razor 文件中

@using BootstrapBlazor.Components

4.增加 BootstrapBlazorRoot 组件到 App.razor 文件中

...

5.添加BootstrapBlazor服务到 Program.cs 文件中 在 builder.Services.AddSingleton(); 后加入

builder.Services.AddBootstrapBlazor();

6.组件参数

参数	说明	可选值	默认值
Width	组件宽度支持单位 如: 100px 75%
ChartType	图表类型	Line/Bar/Pie/Doughnut/Bubble	Line

7.事件

参数	说明	类型
OnInitAsync	组件数据初始化委托方法	Func
OnAfterInitAsync	客户端绘制图表完毕后回调此委托方法	Func
OnAfterUpdateAsync	客户端更新图表完毕后回调此委托方法	Func

8.为了快速建立随机数据,我们建立一个工具类 UtilityChart.cs 代码来源于bb演示工程

using BootstrapBlazor.Components; namespace b06chart; /// /// Chart 工具类 /// internal static class UtilityChart { public static IEnumerable Colors { get; } = new List() { "Red", "Blue", "Green", "Orange", "Yellow", "Tomato", "Pink", "Violet" }; /// /// /// /// public static Task RandomData(Chart chart) => chart.Update(ChartAction.Update); /// /// /// /// /// public static void AddDataSet(Chart chart, ref int dsCount) { if (dsCount < Colors.Count()) { dsCount++; _ = chart.Update(ChartAction.AddDataset); } }/// /// /// /// /// public static void RemoveDataSet(Chart chart, ref int dsCount) { if (dsCount > 1) { dsCount--; _ = chart.Update(ChartAction.RemoveDataset); } }/// /// /// /// /// public static void AddData(Chart chart, ref int daCount) { var limit = chart.ChartType switch { ChartType.Line => 14, ChartType.Bar => 14, ChartType.Bubble => 14, _ => Colors.Count() }; if (daCount < limit) { daCount++; _ = chart.Update(ChartAction.AddData); } }/// /// /// /// /// 【BootstrapBlazor实战|BootstrapBlazor实战 Chart 图表使用(1)】 public static void RemoveData(Chart chart, ref int daCount) { var limit = chart.ChartType switch { ChartType.Line => 7, ChartType.Bar => 7, ChartType.Bubble => 4, _ => 2 }; if (daCount > limit) { daCount--; _ = chart.Update(ChartAction.RemoveData); } } }

9.折线图

折线图
随机数据@code{ private Random Randomer { get; } = new Random(); private int LineDatasetCount = 2; private int LineDataCount = 7; private Chart? LineChart { get; set; }private Task 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 = https://www.it610.com/article/Enumerable.Range(1, LineDataCount).Select((i, index) => (index == 2 && hasNull) ? null! : (object)Randomer.Next(20, 37)) }); } return Task.FromResult(ds); } }

10.柱状图

柱状图
随机数据@code{ private int BarDatasetCount = 2; private int BarDataCount = 7; private Chart? BarChart { get; set; }private Task 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 = https://www.it610.com/article/Enumerable.Range(1, BarDataCount).Select(i => Randomer.Next(20, 37)).Cast