大庆城市建设投资网站,标准品购买网站,怎样连接服务器,4399网页游戏大全作者备注《进击吧#xff01;Blazor#xff01;》是本人与张善友老师合作的Blazor零基础入门系列视频#xff0c;此系列能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力。视频地址#xff1a;https://space.bilibili.com/483888821/channel/detail?cid151273Bl… 作者备注《进击吧Blazor》是本人与张善友老师合作的Blazor零基础入门系列视频此系列能让一个从未接触过Blazor的程序员掌握开发Blazor应用的能力。视频地址https://space.bilibili.com/483888821/channel/detail?cid151273Blazor WebAssembly 是单页应用 (SPA) 框架用于使用 .NET 生成交互式客户端 Web 应用采用 C# 代替 JavaScript 来编写前端代码本系列文章因篇幅有限省略了部分代码完整示例代码https://github.com/TimChen44/Blazor-ToDo第一章6.安全图表的作用我就不扯了想要让系统高大上就少不了它作为一个加分项我们自然也要给我们ToDo引用来一波。目录Chart控件选择改造ToDo1.引用组件2.统计页3.迷你图次回预告Chart控件选择目前还没有比较优秀的Blazor原生Chart控件这也是我们将来需要提升Blazor生态的重要任务之一。但是无需失望Blazor支持C#调用JS反之亦可所以社区中有不少通过此技术对现有JS版本的Chart控件二次分装的Blazor组件可用。这里我就推荐本人封装G2Plot后的Blazor组件ant-design-charts-blazor。文档地址https://ant-design-blazor.gitee.io/zh-CN/charts/introduce源码地址https://github.com/ant-design-blazor/ant-design-charts-blazor技术实现方式介绍https://zhuanlan.zhihu.com/p/163808856改造ToDo1.引用组件通过命令或可视化界面为ToDo.Client添加AntDesign.Charts组件$ dotnet add package AntDesign.Charts 在 wwwroot/index.html(WebAssembly) 或 Pages/_Host.razor(Server) 中引入静态文件:script srchttps://unpkg.com/antv/g2plotlatest/dist/g2plot.js/script script src_content/AntDesign.Charts/ant-design-charts-blazor.js/script 在 _Imports.razor 中加入命名空间using AntDesign.Charts 将Charts命名空间加入全局引用拥有使用时省略完整命名路径的好处但是请注意当Chart中的组件与其他组件重名时不论Chart组件还是其他组件都需要补上完整命名路径考虑到Chart使用的页面并不多所以本人的习惯不会将他加入 _Imports.razor中。2.统计页我们用柱状图做一个每日代办事项数量统计图ChartAmountDto.cs在ToDo.Shared项目中创建用于显示数据的实体。public class ChartAmountDto {public string Day { get; set; }public string Type { get; set; }public int Value { get; set; } } Day字段存储日期文本。Type存储重要度信息包含“普通”“重要”两个值图表中也是用这个进行分组显示。Value存储具体的数值。ChartController.cs在ToDo.Server项目新建ChartController控制器用于提供图表所需的数据。[ApiController] [Route(api/[controller]/[action])] public class ChartController {TodoContext Context;public ChartController(TodoContext context){Context context;}//每日待办数量public ListChartAmountDto GetAmountDto(){return Context.Task.GroupBy(x new { x.PlanTime, x.IsImportant }).Select(x new ChartAmountDto(){Day x.Key.PlanTime.ToString(yy-MM-dd),Type x.Key.IsImportant ? 普通 : 重要,Value x.Count(),}).ToList();} } 通过对计划日期和重要度进行分组然后对分组结果进行计数接口返回的部分数据结构如下[{day:20-09-25,value:2,type:重要},{day:20-10-10,value:9,type:重要},{day:20-10-11,value:6,type:重要},{day:20-10-14,value:2,type:重要},{day:20-10-17,value:6,type:重要},{day:21-01-28,value:1,type:重要} ] Statistics.razor在ToDo.Client项目添加Statistics.razor并填入以下代码page /statisticsSpin SpinningisLoadingAntDesign.Charts.StackedColumn refamountChart ConfigamountConfig TItemChartAmountDto / /Spin AntDesign.Charts.StackedColumn 通过完整的路径添加图表控件。refamountChart 提供了一种引用组件实例的方法随后可以申明一个变量存放组件的引用。ConfigamountConfig 配置图表显示配置。TItemChartAmountDto 定义图表数据类型。添加Statistics.razor.cs文件。public partial class Statistics {[Inject] public HttpClient Http { get; set; }bool isLoading false;IChartComponent amountChart;readonly StackedColumnConfig amountConfig new StackedColumnConfig{Title new Title{Visible true,Text 每日代办数量统计},ForceFit true,Padding auto,XField day,YField value,YAxis new ValueAxis{Min 0,},Meta new{day new{Alias 日期},},Color new[] { #ae331b, #1a6179 },StackField type};protected async override Task OnInitializedAsync(){isLoading true;var amountData await Http.GetFromJsonAsyncListChartAmountDto($api/Chart/GetAmountDto);await amountChart.ChangeData(amountData);await base.OnInitializedAsync();isLoading false;} } IChartComponent amountChart;变量用来存放组件实例引用之后我们就可能使用这个对象对Chart组件进行各类操作。StackedColumnConfig amountConfig定义了堆积柱状图的配置Text 每日代办数量统计 定义了标题文本XField day X轴绑定的字段名YField value Y轴绑定的字段名注意此处绑定字段名是区分大小写的通常c#的dto类字段名会采用大驼峰然而将dto转json默认模式下会将字段名改成小驼峰格式所以注意此处字段名的差异。Meta new { day new { Alias 日期 } } 定义day字段所在州轴显示的文本Color new[] { #ae331b, #1a6179 } 柱状图的颜色如果不指定组件会使用默认颜色StackField type定义了堆砌的字段更多的属性配置可以详见G2Plot组件的文档https://antv-g2plot.gitee.io/zh/examples/galleryMainLayout.razor添加统计菜单项MenuItem RouterLink/statistics RouterMatchNavLinkMatch.Prefix统计 /MenuItem 运行效果3.迷你图图表图表有图有表所以我们需要将我们的图表与我们的代办列表集合。我们的代办记录中有计划日期和截至日期所以我们可以结合当前日期就能做出一个剩余时间进度迷你图。TaskItemTaskItem.razor中添加以下代码div classchart{double progress 0;if (Item.IsFinish false Item.Deadline.HasValue)progress (double)Item.Deadline.Value.Subtract(DateTime.Now).TotalHours / (double)Item.Deadline.Value.Subtract(Item.PlanTime).TotalHours;}AntDesign.Charts.RingProgress Dataprogress ConfigprogressConfig/AntDesign.Charts.RingProgress /div 我们先计算剩余时间结果数值区间在0~1之间然后使用RingProgress组件显示如果已经完成的任务默认值为0。AntDesign.Charts.RingProgress 圆形进度迷你图。Dataprogress 图表数值ConfigprogressConfig 图表配置最后添加一些样式位置上美化一下.task-card-item .chart {margin-left: 8px; } 在TaskItem.razor.cs中添加迷你图配置readonly RingProgressConfig progressConfig new RingProgressConfig {Width 30,Height 30, }; 运行效果随着时间流逝剩余时间减少圆形精度蓝色部分会越来越少次回预告第一章 8.站点部署下次将迎来Todo应用的最终回我们通过一些虚拟场景来演示如何部署Blazor应用。学习资料更多关于Blazor学习资料https://aka.ms/LearnBlazorMSReactor扫码关注我们Bilibili微软Reactor_SH新浪微博MSReactorShanghai知乎微软 Reactor球分享球点赞球在看