當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

《进击吧！Blazor！》系列入门教程第一章 7.图表

發(fā)布時(shí)間：2023/12/4 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了《进击吧！Blazor！》系列入门教程第一章 7.图表小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

作者備注

《進(jìn)擊吧！Blazor！》是本人與張善友老師合作的Blazor零基礎(chǔ)入門系列視頻，此系列能讓一個(gè)從未接觸過Blazor的程序員掌握開發(fā)Blazor應(yīng)用的能力。
視頻地址：https://space.bilibili.com/483888821/channel/detail?cid=151273

Blazor WebAssembly 是單頁(yè)應(yīng)用 (SPA) 框架，用于使用 .NET 生成交互式客戶端 Web 應(yīng)用，采用 C# 代替 JavaScript 來編寫前端代碼

本系列文章因篇幅有限，省略了部分代碼，完整示例代碼：

https://github.com/TimChen44/Blazor-ToDo

第一章

6.安全

圖表的作用我就不扯了，想要讓系統(tǒng)高大上就少不了它，作為一個(gè)加分項(xiàng)，我們自然也要給我們ToDo引用來一波。

Chart控件選擇

改造ToDo

1.引用組件

2.統(tǒng)計(jì)頁(yè)

3.迷你圖

次回預(yù)告

Chart控件選擇

目前還沒有比較優(yōu)秀的Blazor原生Chart控件，這也是我們將來需要提升Blazor生態(tài)的重要任務(wù)之一。

但是無需失望，Blazor支持C#調(diào)用JS，反之亦可，所以社區(qū)中有不少通過此技術(shù)對(duì)現(xiàn)有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

技術(shù)實(shí)現(xiàn)方式介紹：https://zhuanlan.zhihu.com/p/163808856

改造ToDo

1.引用組件

通過命令或可視化界面為ToDo.Client添加AntDesign.Charts組件

$ dotnet add package AntDesign.Charts

在?wwwroot/index.html(WebAssembly) 或?Pages/_Host.razor(Server) 中引入靜態(tài)文件:

在?_Imports.razor?中加入命名空間

@using?AntDesign.Charts

將Charts命名空間加入全局引用，擁有使用時(shí)省略完整命名路徑的好處，但是請(qǐng)注意當(dāng)Chart中的組件與其他組件重名時(shí)，不論Chart組件還是其他組件都需要補(bǔ)上完整命名路徑，考慮到Chart使用的頁(yè)面并不多，所以本人的習(xí)慣不會(huì)將他加入?_Imports.razor中。

2.統(tǒng)計(jì)頁(yè)

我們用柱狀圖做一個(gè)每日代辦事項(xiàng)數(shù)量統(tǒng)計(jì)圖

ChartAmountDto.cs

在ToDo.Shared項(xiàng)目中創(chuàng)建用于顯示數(shù)據(jù)的實(shí)體。

public class ChartAmountDto {public string Day { get; set; }public string Type { get; set; }public int Value { get; set; } }

Day字段存儲(chǔ)日期文本。

Type存儲(chǔ)重要度信息，包含“普通”，“重要”兩個(gè)值，圖表中也是用這個(gè)進(jìn)行分組顯示。

Value存儲(chǔ)具體的數(shù)值。

ChartController.cs

在ToDo.Server項(xiàng)目新建ChartController控制器，用于提供圖表所需的數(shù)據(jù)。

[ApiController] [Route("api/[controller]/[action]")] public class ChartController {TodoContext Context;public ChartController(TodoContext context){Context = context;}//每日待辦數(shù)量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();} }

通過對(duì)計(jì)劃日期和重要度進(jìn)行分組，然后對(duì)分組結(jié)果進(jìn)行計(jì)數(shù)，接口返回的部分?jǐn)?shù)據(jù)結(jié)構(gòu)如下

[{"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項(xiàng)目添加Statistics.razor并填入以下代碼

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

AntDesign.Charts.StackedColumn 通過完整的路徑添加圖表控件。

@ref="@amountChart" 提供了一種引用組件實(shí)例的方法，隨后可以申明一個(gè)變量存放組件的引用。

Config="amountConfig" 配置圖表顯示配置。

TItem="ChartAmountDto" 定義圖表數(shù)據(jù)類型。

添加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 = "每日代辦數(shù)量統(tǒng)計(jì)"},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;變量用來存放組件實(shí)例引用，之后我們就可能使用這個(gè)對(duì)象對(duì)Chart組件進(jìn)行各類操作。

StackedColumnConfig amountConfig定義了堆積柱狀圖的配置

Text = "每日代辦數(shù)量統(tǒng)計(jì)" 定義了標(biāo)題文本
XField = "day" X軸綁定的字段名
YField = "value" Y軸綁定的字段名

注意：此處綁定字段名是區(qū)分大小寫的，通常c#的dto類字段名會(huì)采用大駝峰，然而將dto轉(zhuǎn)json默認(rèn)模式下會(huì)將字段名改成小駝峰格式，所以注意此處字段名的差異。

Meta = new { day = new { Alias = "日期" } } 定義day字段所在州軸顯示的文本
Color = new[] { "#ae331b", "#1a6179" } 柱狀圖的顏色，如果不指定，組件會(huì)使用默認(rèn)顏色
StackField = "type"定義了堆砌的字段

更多的屬性配置可以詳見G2Plot組件的文檔：

https://antv-g2plot.gitee.io/zh/examples/gallery

MainLayout.razor

添加統(tǒng)計(jì)菜單項(xiàng)

運(yùn)行效果

3.迷你圖

圖表，圖表，有圖有表，所以我們需要將我們的圖表與我們的代辦列表集合。

我們的代辦記錄中有計(jì)劃日期和截至日期，所以我們可以結(jié)合當(dāng)前日期就能做出一個(gè)剩余時(shí)間進(jìn)度迷你圖。

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>

我們先計(jì)算剩余時(shí)間，結(jié)果數(shù)值區(qū)間在0~1之間，然后使用RingProgress組件顯示，如果已經(jīng)完成的任務(wù)默認(rèn)值為0。

AntDesign.Charts.RingProgress 圓形進(jìn)度迷你圖。

Data="progress" 圖表數(shù)值

Config="progressConfig" 圖表配置

最后添加一些樣式，位置上美化一下

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

在TaskItem.razor.cs中添加迷你圖配置

readonly RingProgressConfig progressConfig = new RingProgressConfig {Width = 30,Height = 30, };

運(yùn)行效果

隨著時(shí)間流逝，剩余時(shí)間減少，圓形精度藍(lán)色部分會(huì)越來越少

次回預(yù)告

第一章 8.站點(diǎn)部署

下次將迎來Todo應(yīng)用的最終回，我們通過一些虛擬場(chǎng)景來演示如何部署B(yǎng)lazor應(yīng)用。

學(xué)習(xí)資料

更多關(guān)于Blazor學(xué)習(xí)資料：https://aka.ms/LearnBlazor

MSReactor

掃碼｜關(guān)注我們

Bilibili｜微軟Reactor_SH

新浪微博｜MSReactorShanghai

知乎｜微軟 Reactor

球分享

球點(diǎn)贊

球在看

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的《进击吧！Blazor！》系列入门教程第一章 7.图表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： DDD实战课--学习笔记
下一篇：一日一技：ASP.NET Core Ap

编程问答

《进击吧！Blazor！》系列入门教程 第一章 7.图表

總結(jié)

《进击吧！Blazor！》系列入门教程第一章 7.图表