在 Blazor 中使用 Chart.js 快速创建数据可视化图表

news2025/4/9 14:10:05

前言

BlazorChartjs 是一个在 Blazor 中使用 Chart.js 的库（支持Blazor WebAssembly和Blazor Server两种模式），它提供了简单易用的组件来帮助开发者快速集成数据可视化图表到他们的 Blazor 应用程序中。本文我们将一起来学习一下在 Blazor 中使用 Chart.js 快速创建数据可视化图表。

Blazor是什么？

Blazor是一种新兴的Web应用程序框架，具有很大的潜力和发展前景。Blazor是在.NET和Razor上构建的用户界面框架，它采用了最新的Web技术和.NET框架优势，可以使用C# 编程语言编写Web 应用程序，它不仅可以提高开发效率，还可以提供更好的用户体验和更好的可维护性。

详细介绍可以看这篇文章：全面的ASP.NET Core Blazor简介和快速入门

创建Blazor WebAssembly应用

创建名为ChartjsExercise的Blazor WebAssembly应用：

安装NuGet

安装PSC.Blazor.Components.Chartjs包：

添加以下脚本

打开index.html文件，在页面末尾添加以下脚本：

<script src="_content/PSC.Blazor.Components.Chartjs/lib/Chart.js/chart.js"></script>
<script src="_content/PSC.Blazor.Components.Chartjs/Chart.js" type="module"></script>

引入组件

打开你的_Imports.razor文件并添加以下内容：

@using PSC.Blazor.Components.Chartjs
@using PSC.Blazor.Components.Chartjs.Enums
@using PSC.Blazor.Components.Chartjs.Models
@using PSC.Blazor.Components.Chartjs.Models.Common
@using PSC.Blazor.Components.Chartjs.Models.Bar
@using PSC.Blazor.Components.Chartjs.Models.Bubble
@using PSC.Blazor.Components.Chartjs.Models.Doughnut
@using PSC.Blazor.Components.Chartjs.Models.Line
@using PSC.Blazor.Components.Chartjs.Models.Pie
@using PSC.Blazor.Components.Chartjs.Models.Polar
@using PSC.Blazor.Components.Chartjs.Models.Radar
@using PSC.Blazor.Components.Chartjs.Models.Scatter

柱状图

创建BarSimple.razor组件：

razor页面代码

@page "/BarSimple"
@using ChartjsExercise.Model
<h3>柱状图</h3>

<Chart Config="_config" @ref="_chart" Height="500px"></Chart>

@code {
    private BarChartConfig? _config;
    private Chart? _chart;

    protected override async Task OnInitializedAsync()
    {
        _config = new BarChartConfig()
            {
                Options = new Options()
                {
                    Responsive = true,
                    MaintainAspectRatio = false,
                    Plugins = new Plugins()
                    {
                        Legend = new Legend()
                        {
                            Align = Align.Center,
                            Display = true,
                            Position = LegendPosition.Right
                        }
                    },
                    Scales = new Dictionary<string, Axis>()
                {
                    {
                        Scales.XAxisId, new Axis()
                        {
                            Stacked = true,
                            Ticks = new Ticks()
                            {
                                MaxRotation = 0,
                                MinRotation = 0
                            }
                        }
                    },
                    {
                        Scales.YAxisId, new Axis()
                        {
                            Stacked = true
                        }
                    }
                }
                }
            };

        _config.Data.Labels = BarSimpleData.SimpleBarText;
        _config.Data.Datasets.Add(new BarDataset()
            {
                Label = "Value",
                Data = BarSimpleData.SimpleBar.Select(l => l.Value).ToList(),
                BackgroundColor = Colors.Palette1,
                BorderColor = Colors.PaletteBorder1,
                BorderWidth = 1
            });
    }
}

BarSimpleData

    public class BarSimpleData
    {
        public static List<string> SimpleBarText = new List<string>() { "一月", "二月", "三月", "四月", "五月", "六月", "七月" };
        public static List<DataItem> SimpleBar = new List<DataItem>()
        {
            new DataItem() { Name = "一月", Value = 65 },
            new DataItem() { Name = "二月", Value = 59 },
            new DataItem() { Name = "三月", Value = 80 },
            new DataItem() { Name = "四月", Value = 81 },
            new DataItem() { Name = "五月", Value = 56 },
            new DataItem() { Name = "六月", Value = 55 },
            new DataItem() { Name = "七月", Value = 40 }
        };
    }

展示效果

饼图

创建PieSimple.razor组件：

razor页面代码

@page "/PieSimple"
@using ChartjsExercise.Model
<h3>饼图</h3>

<Chart Config="_config" @ref="_chart" Height="500px"></Chart>

@code {
    private PieChartConfig? _config;
    private Chart? _chart;

    protected override async Task OnInitializedAsync()
    {
        _config = new PieChartConfig()
            {
                Options = new PieOptions()
                {
                    Responsive = true,
                    MaintainAspectRatio = false
                }
            };

        _config.Data.Labels = PieSimpleData.SimplePieText;
        _config.Data.Datasets.Add(new PieDataset()
            {
                Label = "数据集",
                Data = PieSimpleData.SimplePie.ToList(),
                BackgroundColor = Colors.PaletteBorder1,
                HoverOffset = 4
            });
    }
}

PieSimpleData

    public class PieSimpleData
    {
        public static List<string> SimplePieText = new List<string>() { "一月", "二月", "三月", "四月" };
        public static List<decimal?> SimplePie = new List<decimal?>() { 300, 50, 100, 20 };
    }

展示效果

折线图

创建LineSimple.razor组件：

razor页面代码

@page "/LineSimple"
@using ChartjsExercise.Model

<h3>折线图</h3>

<Chart Config="_config" @ref="_chart" Height="500px"></Chart>

@code {
    private LineChartConfig? _config;
    private Chart? _chart;

    protected override async Task OnInitializedAsync()
    {
        _config = new LineChartConfig()
        {
        };

        _config.Data.Labels = LineSimpleData.SimpleLineText;
        _config.Data.Datasets.Add(new LineDataset()
            {
                Label = "数据集",
                Data = LineSimpleData.SimpleLine.ToList(),
                BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
                Tension = 0.1M,
                Fill = false,
                PointRadius = 15,
                PointStyle = PointStyle.Cross
            });
    }

    private void AddValue()
    {
        Random rd = new Random();
        _chart.AddData(new List<string?>() { "August" }, 0, new List<decimal?>() { rd.Next(0, 200) });
    }
}

LineSimpleData

    public class LineSimpleData
    {
        public static List<string> SimpleLineText = new List<string>() { "一月", "二月", "三月", "四月", "五月", "六月", "七月" };
        public static List<decimal?> SimpleLine = new List<decimal?>() { 65, 59, 80, 81, 86, 55, 40 };
        public static List<decimal?> SimpleLine2 = new List<decimal?>() { 33, 25, 35, 51, 54, 76, 60 };
        public static List<decimal?> SimpleLine3 = new List<decimal?>() { 53, 91, 39, 61, 39, 87, 23 };
    }

展示效果

配置菜单导航栏

在组件NavMenu.razor中配置：

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">ChartjsExercise</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="BarSimple">
                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span>柱状图
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="PieSimple">
                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span>饼图
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="LineSimple">
                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span>折线图
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

更多图表效果截图

  • 更多图表效果展示可以查看官网示例地址：https://chartjs.puresourcecode.com

项目源码地址

更多项目实用功能和特性欢迎前往项目开源地址查看👀，别忘了给项目一个Star支持💖。

  • GitHub开源地址：https://github.com/erossini/BlazorChartjs

  • ChartjsExercise文章示例：https://github.com/YSGStudyHards/DotNetExercises/tree/master/ChartjsExercise

优秀项目和框架精选

该项目已收录到C#/.NET/.NET Core优秀项目和框架精选中，关注优秀项目和框架精选能让你及时了解C#、.NET和.NET Core领域的最新动态和最佳实践，提高开发工作效率和质量。坑已挖，欢迎大家踊跃提交PR推荐或自荐（让优秀的项目和框架不被埋没🤞）。

  • GitHub开源地址：https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/DotNetProjectPicks.md

  • Gitee开源地址：https://gitee.com/ysgdaydayup/DotNetGuide/blob/main/docs/DotNet/DotNetProjectPicks.md

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2327589.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SQL server 2022和SSMS的使用案例1

SQL server 2022和SSMS的使用案例1

一&#xff0c;案例讲解 二&#xff0c;实战讲解 实战环境 你需要确保你已经安装完成SQL Server 2022 和SSMS 20.2 管理面板。点此跳转至安装教程 SQL Server2022Windows11 专业工作站SSMS20.2 1&#xff0c;连接数据库 打开SSMS&#xff0c;连接数据库。 正常连接示意图&…
阅读更多...
GO语言学习（14）GO并发编程

GO语言学习（14）GO并发编程

目录 &#x1f308;前言 1.goroutine&#x1f31f; 2.GMP模型&#x1f31f; 2.1 GMP的由来☀️ 2.2 什么是GMP☀️ 3.channel &#x1f31f; 3.1 通道声明与数据传输&#x1f4a5; 3.2 通道关闭 &#x1f4a5; 3.3 通道遍历 &#x1f4a5; 3.4 Select语句 &#x1f4…
阅读更多...
【Audio开发二】Android原生音量曲线调整说明

【Audio开发二】Android原生音量曲线调整说明

一&#xff0c;客制化需求 客户方对于音量加减键从静音到最大音量十五个档位区域的音量变化趋势有定制化需求。 二&#xff0c;音量曲线调试流程 Android根据不同的音频流类型定义不同的曲线&#xff0c;曲线文件存放在/vendor/etc/audio_policy_volumes.xml或者default_volu…
阅读更多...
spring-security原理与应用系列：HttpSecurity.filters

spring-security原理与应用系列：HttpSecurity.filters

目录 AnyRequestMatcher WebSecurityConfig HttpSecurity AbstractInterceptUrlConfigurer AbstractAuthenticationProcessingFilter 类图 在前面的文章《spring-security原理与应用系列&#xff1a;securityFilterChainBuilders》中&#xff0c;我们遗留了一个问题&…
阅读更多...
JVM生产环境问题定位与解决实战（六）：总结篇——问题定位思路与工具选择策略

JVM生产环境问题定位与解决实战（六）：总结篇——问题定位思路与工具选择策略

本文已收录于《JVM生产环境问题定位与解决实战》专栏&#xff0c;完整系列见文末目录 引言 在前五篇文章中&#xff0c;我们深入探讨了JVM生产环境问题定位与解决的实战技巧&#xff0c;从基础的jps、jmap、jstat、jstack、jcmd等工具&#xff0c;到JConsole、VisualVM、MAT的…
阅读更多...
并行治理机制对比：Polkadot、Ethereum 与 NEAR

并行治理机制对比：Polkadot、Ethereum 与 NEAR

治理是任何去中心化网络的基础。它塑造了社区如何发展、如何为创新提供资金、如何应对挑战以及如何随着时间的推移建立信任。随着 Web3 的不断发展&#xff0c;决定这些生态系统如何做出决策的治理模型也在不断发展。 在最近的一集的【The Decentralized Mic】中, Polkadot 汇…
阅读更多...
TDengine tar.gz和docker两种方式安装和卸载

TDengine tar.gz和docker两种方式安装和卸载

下载地址 3.1.1.0 Linux版本 安装包 下载地址 3.1.1.0 docker 镜像 下载地址 3.1.1.0 Window客户端 1. 将文件上传至服务器后解压 tar -zxvf TDengine-server-3.1.1.0-Linux-x64.tar.gz 2. tar.gz安装 解压文件后&#xff0c;进入相应子目录&#xff0c;执行其中的 install.…
阅读更多...
【STM32设计】基于STM32的智能门禁管理系统（指纹+密码+刷卡+蜂鸣器报警）（代码+资料+论文）

【STM32设计】基于STM32的智能门禁管理系统（指纹+密码+刷卡+蜂鸣器报警）（代码+资料+论文）

本课题为基于单片机的智能门禁系统&#xff0c;整个系统由AS608指纹识别模块&#xff0c;矩阵键盘&#xff0c;STM32F103单片机&#xff0c;OLED液晶&#xff0c;RFID识别模块&#xff0c;继电器&#xff0c;蜂鸣器等构成&#xff0c;在使用时&#xff0c;用户可以录入新的指纹…
阅读更多...
java知识梳理（二）

java知识梳理（二）

一.lambda表达式 作用&#xff1a;Lambda 表达式在 Java 8 引入&#xff0c;主要用于简化匿名内部类的写法&#xff0c;特别是在函数式编程场景中&#xff0c;比如 函数式接口、流式 API&#xff08;Streams&#xff09;、并发编程等。它让 Java 代码更简洁、可读性更强&#x…
阅读更多...
鸿蒙Flutter实战：20. Flutter集成高德地图，同层渲染

鸿蒙Flutter实战：20. Flutter集成高德地图，同层渲染

本文以同层渲染为例&#xff0c;介绍如何集成高德地图 完整代码见 Flutter 鸿蒙版 Demo 概述 Dart 侧 核心代码如下&#xff0c;通过 OhosView 来承载原生视图 OhosView(viewType: com.shaohushuo.app/customView,onPlatformViewCreated: _onPlatformViewCreated,creation…
阅读更多...
AI辅助下基于ArcGIS Pro的SWAT模型全流程高效建模实践与深度进阶应用

AI辅助下基于ArcGIS Pro的SWAT模型全流程高效建模实践与深度进阶应用

目前&#xff0c;流域水资源和水生态问题逐渐成为制约社会经济和环境可持续发展的重要因素。SWAT模型是一种基于物理机制的分布式流域水文与生态模拟模型&#xff0c;能够对流域的水循环过程、污染物迁移等过程进行精细模拟和量化分析。SWAT模型目前广泛应用于流域水文过程研究…
阅读更多...
尚语翻译图册翻译|专业图册翻译|北京专业翻译公司推荐|专业文件翻译报价

尚语翻译图册翻译|专业图册翻译|北京专业翻译公司推荐|专业文件翻译报价

内容概要 尚语翻译公司聚焦多语种产品图册翻译的竞价推广服务&#xff0c;通过行业垂直化运营构建差异化竞争力。其核心服务覆盖机械制造、医疗器械、电子元件三大领域&#xff0c;依托ISO 17100认证的翻译流程和Trados术语管理系统&#xff0c;实现技术文档的精准转化。为提升…
阅读更多...
LeetCode 解题思路 30（Hot 100）

LeetCode 解题思路 30（Hot 100）

解题思路&#xff1a; 递归参数&#xff1a; 生成括号的对数 n、结果集 result、当前路径 path、左括号数 open、右括号数 close。递归过程&#xff1a; 当当前路径 path 的长度等于 n * 2 时&#xff0c;说明已经生成有效括号&#xff0c;加入结果集。若左括号数小于 n&…
阅读更多...
Java EE(18)——网络原理——应用层HTTP协议

Java EE(18)——网络原理——应用层HTTP协议

一.初识HTTP协议 HTTP(HyperText Transfer Protocol&#xff0c;超文本传输协议)是用于在客户端&#xff08;如浏览器&#xff09;和服务器之间传输超媒体文档&#xff08;如HTML&#xff09;的应用层协议。 HTTP协议发展至今发布了多个版本&#xff0c;其中1.0&#xff0c;1.…
阅读更多...
强大而易用的JSON在线处理工具

强大而易用的JSON在线处理工具

强大而易用的JSON在线处理工具&#xff1a;程序员的得力助手 在当今的软件开发世界中&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;已经成为了数据交换的通用语言。无论是前端还是后端开发&#xff0c;我们都经常需要处理、验证和转换JSON数据。今天&a…
阅读更多...
Qt笔记----》不同环境程序打包

Qt笔记----》不同环境程序打包

文章目录 概要1、windows环境下打包qt程序2、linux环境下打包qt程序2.1、程序目录2.2、创建一个空文件夹2.3、添加依赖脚本2.4、打包过程2.4.1、添加程序依赖库2.4.2、添加Qt相关依赖库 概要 qt不同运行环境下打包方式&#xff1a;windows/linux 1、windows环境下打包qt程序 …
阅读更多...
企业服务器备份软件，企业服务器备份的方法有哪些？

企业服务器备份软件，企业服务器备份的方法有哪些？

企业服务器备份需综合考虑数据量、业务连续性要求&#xff08;RTO/RPO&#xff09;、合规性及成本等因素。以下是分场景的工具和方法指南&#xff1a; 一、备份软件推荐 1. 80KM备份软件 80KM备份软件可以进行很复杂的备份方式&#xff0c;也可以内网对内网备份、还能内网的…
阅读更多...
html5炫酷图片悬停效果实现详解

html5炫酷图片悬停效果实现详解

html5炫酷图片悬停效果实现详解 这里写目录标题 html5炫酷图片悬停效果实现详解项目介绍技术栈核心功能实现1. 页面布局2. 图片容器样式3. 炫酷悬停效果缩放效果倾斜效果模糊效果旋转效果 4. 悬停文字效果5. 性能优化6. 响应式设计 项目亮点总结 项目介绍 本文将详细介绍如何使…
阅读更多...
机器学习的一百个概念（5）数据增强

机器学习的一百个概念（5）数据增强

前言 本文隶属于专栏《机器学习的一百个概念》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见[《机器学习的一百个概念》 ima 知识库 知识库广场搜索&…
阅读更多...
在MCU工程中优化CPU工作效率的几种方法

在MCU工程中优化CPU工作效率的几种方法

在嵌入式系统开发中&#xff0c;优化 CPU 工作效率对于提升系统性能、降低功耗、提高实时性至关重要。Keil 作为主流的嵌入式开发工具&#xff0c;提供了多种优化策略&#xff0c;包括 关键字使用、内存管理、字节对齐、算法优化 等。本文将从多个方面介绍如何在 Keil 工程中优…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023