在Blazor中使用Chart.js快速創建圖表

前言

BlazorChartjs是一個在Blazor中使用Chart.js的庫（支持Blazor WebAssembly和Blazor Server兩種模式），它提供了簡單易用的組件來幫助開發者快速集成數據可視化圖表到他們的 Blazor 應用程序中。本文我們將一起來學習一下在Blazor中使用Chart.js快速創建圖表。

Blazor是什么？

Blazor是一種新興的Web應用程序框架，具有很大的潛力和發展前景。Blazor是在.NET和Razor上構建的用戶界面框架，它采用了最新的Web技術和.NET框架優勢，可以使用C# 編程語言編寫Web 應用程序，它不僅可以提高開發效率，還可以提供更好的用戶體驗和更好的可維護性。

詳細介紹可以看這篇文章：全面的ASP.NET Core Blazor簡介和快速入門

創建Blazor WebAssembly應用

創建名為ChartjsExercise的Blazor WebAssembly應用：

安裝NuGet

安裝PSC.Blazor.Components.Chartjs包：

添加以下腳本

打開index.html文件，在頁面末尾添加以下腳本：

<script src="_content/PSC.Blazor.Components.Chartjs/lib/Chart.js/chart.js"></script>
<script src="_content/PSC.Blazor.Components.Chartjs/Chart.js" type="module"></script>

引入組件

打開你的_Imports.razor文件并添加以下內容：

@using PSC.Blazor.Components.Chartjs
@using PSC.Blazor.Components.Chartjs.Enums
@using PSC.Blazor.Components.Chartjs.Models
@using PSC.Blazor.Components.Chartjs.Models.Common
@using PSC.Blazor.Components.Chartjs.Models.Bar
@using PSC.Blazor.Components.Chartjs.Models.Bubble
@using PSC.Blazor.Components.Chartjs.Models.Doughnut
@using PSC.Blazor.Components.Chartjs.Models.Line
@using PSC.Blazor.Components.Chartjs.Models.Pie
@using PSC.Blazor.Components.Chartjs.Models.Polar
@using PSC.Blazor.Components.Chartjs.Models.Radar
@using PSC.Blazor.Components.Chartjs.Models.Scatter

柱狀圖

創建BarSimple.razor組件：

razor頁面代碼

@page "/BarSimple"
@using ChartjsExercise.Model
<h3>柱狀圖</h3>

<Chart Config="_config" @ref="_chart" Height="500px"></Chart>

@code {
    private BarChartConfig? _config;
    private Chart? _chart;

    protected override async Task OnInitializedAsync()
    {
        _config = new BarChartConfig()
            {
                Options = new Options()
                {
                    Responsive = true,
                    MaintainAspectRatio = false,
                    Plugins = new Plugins()
                    {
                        Legend = new Legend()
                        {
                            Align = Align.Center,
                            Display = true,
                            Position = LegendPosition.Right
                        }
                    },
                    Scales = new Dictionary<string, Axis>()
                {
                    {
                        Scales.XAxisId, new Axis()
                        {
                            Stacked = true,
                            Ticks = new Ticks()
                            {
                                MaxRotation = 0,
                                MinRotation = 0
                            }
                        }
                    },
                    {
                        Scales.YAxisId, new Axis()
                        {
                            Stacked = true
                        }
                    }
                }
                }
            };

        _config.Data.Labels = BarSimpleData.SimpleBarText;
        _config.Data.Datasets.Add(new BarDataset()
            {
                Label = "Value",
                Data = BarSimpleData.SimpleBar.Select(l => l.Value).ToList(),
                BackgroundColor = Colors.Palette1,
                BorderColor = Colors.PaletteBorder1,
                BorderWidth = 1
            });
    }
}

BarSimpleData

    public class BarSimpleData
    {
        public static List<string> SimpleBarText = new List<string>() { "一月", "二月", "三月", "四月", "五月", "六月", "七月" };
        public static List<DataItem> SimpleBar = new List<DataItem>()
        {
            new DataItem() { Name = "一月", Value = 65 },
            new DataItem() { Name = "二月", Value = 59 },
            new DataItem() { Name = "三月", Value = 80 },
            new DataItem() { Name = "四月", Value = 81 },
            new DataItem() { Name = "五月", Value = 56 },
            new DataItem() { Name = "六月", Value = 55 },
            new DataItem() { Name = "七月", Value = 40 }
        };
    }

展示效果

餅圖

創建PieSimple.razor組件：

razor頁面代碼

@page "/PieSimple"
@using ChartjsExercise.Model
<h3>餅圖</h3>

<Chart Config="_config" @ref="_chart" Height="500px"></Chart>

@code {
    private PieChartConfig? _config;
    private Chart? _chart;

    protected override async Task OnInitializedAsync()
    {
        _config = new PieChartConfig()
            {
                Options = new PieOptions()
                {
                    Responsive = true,
                    MaintainAspectRatio = false
                }
            };

        _config.Data.Labels = PieSimpleData.SimplePieText;
        _config.Data.Datasets.Add(new PieDataset()
            {
                Label = "數據集",
                Data = PieSimpleData.SimplePie.ToList(),
                BackgroundColor = Colors.PaletteBorder1,
                HoverOffset = 4
            });
    }
}

PieSimpleData

    public class PieSimpleData
    {
        public static List<string> SimplePieText = new List<string>() { "一月", "二月", "三月", "四月" };
        public static List<decimal?> SimplePie = new List<decimal?>() { 300, 50, 100, 20 };
    }

展示效果

折線圖

創建LineSimple.razor組件：

razor頁面代碼

@page "/LineSimple"
@using ChartjsExercise.Model

<h3>折線圖</h3>

<Chart Config="_config" @ref="_chart" Height="500px"></Chart>

@code {
    private LineChartConfig? _config;
    private Chart? _chart;

    protected override async Task OnInitializedAsync()
    {
        _config = new LineChartConfig()
        {
        };

        _config.Data.Labels = LineSimpleData.SimpleLineText;
        _config.Data.Datasets.Add(new LineDataset()
            {
                Label = "數據集",
                Data = LineSimpleData.SimpleLine.ToList(),
                BorderColor = Colors.PaletteBorder1.FirstOrDefault(),
                Tension = 0.1M,
                Fill = false,
                PointRadius = 15,
                PointStyle = PointStyle.Cross
            });
    }

    private void AddValue()
    {
        Random rd = new Random();
        _chart.AddData(new List<string?>() { "August" }, 0, new List<decimal?>() { rd.Next(0, 200) });
    }
}

LineSimpleData

    public class LineSimpleData
    {
        public static List<string> SimpleLineText = new List<string>() { "一月", "二月", "三月", "四月", "五月", "六月", "七月" };
        public static List<decimal?> SimpleLine = new List<decimal?>() { 65, 59, 80, 81, 86, 55, 40 };
        public static List<decimal?> SimpleLine2 = new List<decimal?>() { 33, 25, 35, 51, 54, 76, 60 };
        public static List<decimal?> SimpleLine3 = new List<decimal?>() { 53, 91, 39, 61, 39, 87, 23 };
    }

展示效果

配置菜單導航欄

在組件NavMenu.razor中配置：

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">ChartjsExercise</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="BarSimple">
                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span>柱狀圖
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="PieSimple">
                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span>餅圖
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="LineSimple">
                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span>折線圖
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

項目源碼地址

更多項目實用功能和特性歡迎前往項目開源地址查看??，別忘了給項目一個Star支持??。

GitHub開源地址：https://github.com/erossini/BlazorChartjs

ChartjsExercise文章示例：https://github.com/YSGStudyHards/DotNetExercises/tree/master/ChartjsExercise

優秀項目和框架精選

該項目已收錄到C#/.NET/.NET Core優秀項目和框架精選中，關注優秀項目和框架精選能讓你及時了解C#、.NET和.NET Core領域的最新動態和最佳實踐，提高開發工作效率和質量。坑已挖，歡迎大家踴躍提交PR推薦或自薦（讓優秀的項目和框架不被埋沒??）。

https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/DotNetProjectPicks.md

DotNetGuide技術社區交流群

DotNetGuide技術社區是一個面向.NET開發者的開源技術社區，旨在為開發者們提供全面的C#/.NET/.NET Core相關學習資料、技術分享和咨詢、項目框架推薦、求職和招聘資訊、以及解決問題的平臺。
在DotNetGuide技術社區中，開發者們可以分享自己的技術文章、項目經驗、學習心得、遇到的疑難技術問題以及解決方案，并且還有機會結識志同道合的開發者。
我們致力于構建一個積極向上、和諧友善的.NET技術交流平臺。無論您是初學者還是有豐富經驗的開發者，我們都希望能為您提供更多的價值和成長機會。

歡迎加入DotNetGuide技術社區微信交流群??

posted @ 2024-03-19 08:00 追逐時光者閱讀(1944) 評論(8) 收藏舉報

刷新頁面返回頂部

追逐時光者

??不積跬步無以至千里，不積小流無以成江海！

在Blazor中使用Chart.js快速創建圖表

前言

Blazor是什么？

創建Blazor WebAssembly應用

安裝NuGet

添加以下腳本

引入組件

柱狀圖

razor頁面代碼

BarSimpleData

展示效果

餅圖

razor頁面代碼

PieSimpleData

展示效果

折線圖

razor頁面代碼

LineSimpleData

展示效果

配置菜單導航欄

更多圖表效果截圖

項目源碼地址

優秀項目和框架精選

DotNetGuide技術社區交流群

公告