乐趣区

关于.net:进击吧Blazor系列入门教程-第一章-7图表

《进击吧!Blazor!》是自己与张善友老师单干的 Blazor 零根底入门教程视频,此教程能让一个从未接触过 Blazor 的程序员把握开发 Blazor 利用的能力。
视频地址:https://space.bilibili.com/48…
Blazor WebAssembly 是单页利用 (SPA) 框架,用于应用 .NET 生成交互式客户端 Web 利用,采纳 C# 代替 JavaScript 来编写前端代码
本系列文章因篇幅无限,省略了局部代码,残缺示例代码:https://github.com/TimChen44/…

作者:陈超超
Ant Design Blazor 我的项目贡献者,领有十多年从业教训,长期基于.Net 技术栈进行架构与开发产品的工作,现就职于正泰团体。
邮箱:timchen@live.com
欢送各位读者有任何问题分割我,咱们共同进步。

图表的作用我就不扯了,想要让零碎高大上就少不了它,作为一个加分项,咱们天然也要给咱们 ToDo 援用来一波。

Chart 控件抉择

目前还没有比拟优良的 Blazor 原生 Chart 控件,这也是咱们未来须要晋升 Blazor 生态的重要工作之一。

然而无需悲观,Blazor 反对 C# 调用 JS,反之亦可,所以社区中有不少通过此技术对现有 JS 版本的 Chart 控件二次分装的 Blazor 组件可用。

这里我就举荐自己封装 G2Plot 后的 Blazor 组件 ant-design-charts-blazor。

文档地址:https://ant-design-blazor.git…
源码地址:https://github.com/ant-design…
技术实现形式介绍:https://zhuanlan.zhihu.com/p/…
https://www.bilibili.com/vide…

革新 ToDo

援用组件

  • 通过命令或可视化界面为 ToDo.Client 增加 AntDesign.Charts 组件
$ dotnet add package AntDesign.Charts

  • wwwroot/index.html(WebAssembly) 或 Pages/_Host.razor(Server) 中引入动态文件:
<script src="https://unpkg.com/@antv/g2plot@latest/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中。

统计页

咱们用柱状图做一个每日代办事项数量统计图

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 List<ChartAmountDto> 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 "/statistics"

<Spin Spinning="isLoading">
    <AntDesign.Charts.StackedColumn @ref="@amountChart" Config="amountConfig" TItem="ChartAmountDto" />
</Spin>

AntDesign.Charts.StackedColumn 通过残缺的门路增加图表控件。
@ref="@amountChart" 提供了一种援用组件实例的办法,随后能够申明一个变量寄存组件的援用。
Config="amountConfig" 配置图表显示配置。
TItem="ChartAmountDto" 定义图表数据类型。

增加 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.GetFromJsonAsync<List<ChartAmountDto>>($"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/…

MainLayout.razor

增加 统计 菜单项

<MenuItem RouterLink="/statistics" RouterMatch="NavLinkMatch.Prefix">
    统计
</MenuItem>
运行成果

迷你图

图表,图表,有图有表,所以咱们须要将咱们的图表与咱们的代办列表汇合。

咱们的代办记录中有打算日期和截至日期,所以咱们能够联合以后日期就能做出一个剩余时间进度迷你图。

TaskItem

TaskItem.razor中增加以下代码

<div class="chart">
    @{
        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 Data="progress" Config="progressConfig"></AntDesign.Charts.RingProgress>
</div>

咱们先计算剩余时间,后果数值区间在 0~1 之间,而后应用 RingProgress 组件显示,如果曾经实现的工作默认值为 0。
AntDesign.Charts.RingProgress 圆形进度迷你图。
Data="progress" 图表数值
Config="progressConfig" 图表配置

最初增加一些款式,地位上丑化一下

.task-card-item .chart {margin-left: 8px;}

TaskItem.razor.cs 中增加迷你图配置

readonly RingProgressConfig progressConfig = new RingProgressConfig
{
    Width = 30,
    Height = 30,
};
运行成果

随着工夫流逝,剩余时间缩小,圆形精度蓝色局部会越来越少

次回预报

下次将迎来 Todo 利用的最终回,咱们通过一些虚构场景来演示如何部署 Blazor 利用。

学习材料

更多对于 Blazor 学习材料:https://aka.ms/LearnBlazor

退出移动版