>《進擊吧！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 >作者：陳超超 >Ant Design Blazor 專案貢獻者，擁有十多年從業經驗，長期基於.Net技術棧進行架構與開發產品的工作，現就職於正泰集團。 >郵箱：[email protected] >歡迎各位讀者有任何問題聯絡我，我們共同進步。 圖表的作用我就不扯了，想要讓系統高大上就少不了它，作為一個加分項，我們自然也要給我們ToDo引用來一波。 # 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 ### 引用元件 - 通過命令或視覺化介面為`ToDo.Client`新增`AntDesign.Charts`元件 ```bash $ dotnet add package AntDesign.Charts ```  - 在 `wwwroot/index.html`(WebAssembly) 或 `Pages/_Host.razor`(Server) 中引入靜態檔案: ```html ``` - 在 `_Imports.razor` 中加入名稱空間 ```csharp @using AntDesign.Charts ``` > 將Charts名稱空間加入全域性引用，擁有使用時省略完整命名路徑的好處，但是請注意當Chart中的元件與其他元件重名時，不論Chart元件還是其他元件都需要補上完整命名路徑，考慮到Chart使用的頁面並不多，所以本人的習慣不會將他加入 `_Imports.razor`中。 ### 統計頁 我們用柱狀圖做一個每日代辦事項數量統計圖 ##### ChartAmountDto.cs 在`ToDo.Shared`專案中建立用於顯示資料的實體。 ```csharp 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`控制器，用於提供圖表所需的資料。 ```csharp [ApiController] [Route("api/[controller]/[action]")] public class ChartController { TodoContext Context; public ChartController(TodoContext context) { Context = context; } //每日待辦數量 pub