关于.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 援用来一波。

目前还没有比拟优良的 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.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

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

Chart 控件抉择

革新 ToDo

援用组件

统计页

ChartAmountDto.cs

ChartController.cs

Statistics.razor

MainLayout.razor

运行成果

迷你图

TaskItem

运行成果

次回预报

学习材料