在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文件，在页面末尾添加以下脚本：

引入组件

打开你的_Imports.razor文件并添加以下内容：

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

@page"/BarSimple"
@usingChartjsExercise.Model
柱状图




@code{
privateBarChartConfig?_config;
privateChart?_chart;

protectedoverrideasyncTaskOnInitializedAsync()
{
_config=newBarChartConfig()
{
Options=newOptions()
{
Responsive=true,
MaintainAspectRatio=false,
Plugins=newPlugins()
{
Legend=newLegend()
{
Align=Align.Center,
Display=true,
Position=LegendPosition.Right
}
},
Scales=newDictionary()
{
{
Scales.XAxisId,newAxis()
{
Stacked=true,
Ticks=newTicks()
{
MaxRotation=0,
MinRotation=0
}
}
},
{
Scales.YAxisId,newAxis()
{
Stacked=true
}
}
}
}
};

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

publicclassBarSimpleData
{
publicstaticListSimpleBarText=newList(){"一月","二月","三月","四月","五月","六月","七月"};
publicstaticListSimpleBar=newList()
{
newDataItem(){Name="一月",Value=65},
newDataItem(){Name="二月",Value=59},
newDataItem(){Name="三月",Value=80},
newDataItem(){Name="四月",Value=81},
newDataItem(){Name="五月",Value=56},
newDataItem(){Name="六月",Value=55},
newDataItem(){Name="七月",Value=40}
};
}

饼图

创建PieSimple.razor组件：

razor页面代码

@page"/PieSimple"
@usingChartjsExercise.Model
饼图




@code{
privatePieChartConfig?_config;
privateChart?_chart;

protectedoverrideasyncTaskOnInitializedAsync()
{
_config=newPieChartConfig()
{
Options=newPieOptions()
{
Responsive=true,
MaintainAspectRatio=false
}
};

_config.Data.Labels=PieSimpleData.SimplePieText;
_config.Data.Datasets.Add(newPieDataset()
{
Label="数据集",
Data=PieSimpleData.SimplePie.ToList(),
BackgroundColor=Colors.PaletteBorder1,
HoverOffset=4
});
}
}

PieSimpleData

publicclassPieSimpleData
{
publicstaticListSimplePieText=newList(){"一月","二月","三月","四月"};
publicstaticListSimplePie=newList(){300,50,100,20};
}

展示效果

@page"/LineSimple"
@usingChartjsExercise.Model

折线图




@code{
privateLineChartConfig?_config;
privateChart?_chart;

protectedoverrideasyncTaskOnInitializedAsync()
{
_config=newLineChartConfig()
{
};

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

privatevoidAddValue()
{
Randomrd=newRandom();
_chart.AddData(newList(){"August"},0,newList(){rd.Next(0,200)});
}
}

publicclassLineSimpleData
{
publicstaticListSimpleLineText=newList(){"一月","二月","三月","四月","五月","六月","七月"};
publicstaticListSimpleLine=newList(){65,59,80,81,86,55,40};
publicstaticListSimpleLine2=newList(){33,25,35,51,54,76,60};
publicstaticListSimpleLine3=newList(){53,91,39,61,39,87,23};
}

ChartjsExercise
















@code{
privateboolcollapseNavMenu=true;

privatestring?NavMenuCssClass=>collapseNavMenu?"collapse":null;

privatevoidToggleNavMenu()
{
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技术社区微信交流群

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管服务器托管网， http://www.fwqtg.net