如何对 Asp.Net Core Razor 页面中存储过程的结果集进行分类，以使用 Chartjs 渲染图形

Question

我有一个存储过程，如下所示，

CREATE PROCEDURE [dbo].[sp_DistinctFunction]
                 @CustomerName NVARCHAR(MAX)                                                    
                 AS
BEGIN
                 SET NOCOUNT ON;
                 SELECT [function]as FuncName, EmployeeGroup as EmpGrp, Count(BadgeNo) as EmpCount
                 FROM EmployeeData
                 WHERE CustomerName = @CustomerName  Group By [function], EmployeeGroup
END
GO

结果集将类似于，

我想用这个结果集绘制一个图表。为此，我正在使用 Chartjs。 首先，我想要每个员工组的图表，其功能为条形图。请参阅下图

请告知如何为此动态生成图表？