作者備注

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

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

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

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

第一章

6.安全

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

目錄

Chart控件選擇

改造ToDo

1.引用組件

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

改造ToDo

1.引用組件

通過命令或可視化界面為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中。

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 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/zh/examples/gallery

MainLayout.razor

添加統計菜單項

<MenuItem RouterLink="/statistics" RouterMatch="NavLinkMatch.Prefix">統計 </MenuItem>

運行效果

3.迷你圖

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

我們的代辦記錄中有計劃日期和截至日期，所以我們可以結合當前日期就能做出一個剩余時間進度迷你圖。

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, };

運行效果

隨著時間流逝，剩余時間減少，圓形精度藍色部分會越來越少

次回預告

第一章 8.站點部署

下次將迎來Todo應用的最終回，我們通過一些虛擬場景來演示如何部署Blazor應用。

學習資料

更多關于Blazor學習資料：https://aka.ms/LearnBlazor

MSReactor

掃碼｜關注我們

Bilibili｜微軟Reactor_SH

新浪微博｜MSReactorShanghai

知乎｜微軟 Reactor

球分享

球點贊

球在看

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。