在 ASP .NET Core 中从数据库获取图表数据时遇到问题

Question

我在将数据从我的 Azure SQL 数据库加载到我使用 chartJS 创建的图表时遇到了问题。我正在尝试从“workTS”table 中从“hrPlan”、“hrSub”和“hrFact”列中获取 2021 年的数据，但它目前工作不正常。
如果我尝试直接从图表函数中获取日志中的 hrPlan、hrSub 或 hrFact 值，如下所示：console.log("hrPlan=" + hrPlan); 我收到以下错误：Uncaught ReferenceError: hrPlan is not defined 我想我没有正确地为我的图表函数提供数据值，但我可能是错的。
它应该是这样的（所有数据都是硬编码的）：现在是这样的： dbo.workTS: 我的 workTS 模型代码：

public class WorkTS
    {
        public string? org { get; set; }
        public DateTime? dt { get; set; }
        public decimal? hrFact { get; set; }
        public decimal? hrPlan { get; set; }
        public decimal? hrReestr { get; set; }
        public DateTime? dtSynchro { get; set; }
        public DateTime? dtMonth { get; set; }
        public decimal? hrSub { get; set; }
        public decimal? hrFactWSub { get; set; }
    }

上下文：

public class AzureDBContext : DbContext
    {
        public DbSet<WorkTS> WorkTs { get; set; }

        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            modelBuilder.Entity<WorkTS>(builder =>
            {
                builder.HasNoKey();
                builder.ToTable("workTS");
            });
        }

        public AzureDBContext(DbContextOptions<AzureDBContext> options)
            : base(options)
        {            
        }
        protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
        {
            optionsBuilder.UseSqlServer("{database connection string}");
        }
    }

控制器：

private readonly AzureDBContext _azdb;

        public HomeController(ILogger<HomeController> logger, AzureDBContext azcontext)
        {
            _logger = logger;
            _azdb = azcontext;
        }

        public async Task<ActionResult> OnGetWorkTSData_MTK()  
        {            
            var plan = _azdb.WorkTs.Where(w => w.org == "ООО \"МТК\"").Where(w => w.dtMonth.Value.Year == 2021).Select(w => w.hrPlan).ToArray();
            var sub = _azdb.WorkTs.Where(w => w.org == "ООО \"МТК\"").Where(w => w.dtMonth.Value.Year == 2021).Select(w => w.hrSub).ToArray();
            var fact = _azdb.WorkTs.Where(w => w.org == "ООО \"МТК\"").Where(w => w.dtMonth.Value.Year == 2021).Select(w => w.hrFact).ToArray();
            return new JsonResult(new { hrPlan = plan, hrSub = sub, hrFact = fact });
        }

最后，图表代码：

            <div>
                <canvas id="workTSChart"></canvas>
            </div>
            <script>console.log("This is first debug line");</script>
            <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
            <script>
                $(document).ready(function () {
                    $.ajax({
                        type: "Get",
                        url: '@Url.Action("OnGetWorkTSData_MTK","home")',
                        contentType: "application/json",
                        dataType: "json",
                        success: function (response) {                            
                            var data = response.hrPlan;
                            var data2 = response.hrSub;
                            var data3 = response.hrFact;
                                                        
                            var ctx = document.getElementById("workTSChart");
                            var workTSChart = new Chart(ctx, {
                                type: 'bar',
                                data: {
                                    labels: [
                                        'ООО "МТК"',
                                    ],
                                    datasets: [{
                                        label: 'Plan hours',
                                        data: data,
                                        backgroundColor: 'rgb(161, 221, 239)',
                                        borderColor: 'rgb(161, 221, 239)',
                                    },
                                    {
                                        label: 'Sub hours',
                                        data: data2,
                                        backgroundColor: 'rgb(254, 171, 133)',
                                        borderColor: 'rgb(254, 171, 133)',
                                    },
                                    {
                                        label: 'Fact hours',
                                        data: data3,
                                        backgroundColor: 'rgb(127, 137, 138)',
                                        borderColor: 'rgb(127, 137, 138)',
                                    }]
                                },
                                options: {
                                    responsive: true,
                                    plugins: {
                                        legend: {
                                            position: 'top',
                                        },
                                        title: {
                                            display: true,
                                            text: 'Test chart'
                                        }
                                    }
                                },
                            });

                        },
                        error: function (response) {
                            alert(response.responseText);
                            console.log("This is ERROR line");
                        }
                    });
                });

Answer 1

如果后端像下面这样，你得到的数据只是一个简单的小数。

var plan = _azdb.WorkTs.Where(w => w.org == "ООО \"МТК\"")
                       .Where(w => w.dtMonth.Value.Year == 2021)
                       .Select(w => w.hrPlan)
                       .Sum();

data in datasets 应该是一个数组。您需要如下更改：

datasets: [{
    label: 'Plan hours',
    data: [data],    //change here...
    backgroundColor: 'rgb(161, 221, 239)',
    borderColor: 'rgb(161, 221, 239)',
},
{
    label: 'Sub hours',
    data: [data2],     //change here...
    backgroundColor: 'rgb(254, 171, 133)',
    borderColor: 'rgb(254, 171, 133)',
},
{
    label: 'Fact hours',
    data: [data3],    //change here...
    backgroundColor: 'rgb(127, 137, 138)',
    borderColor: 'rgb(127, 137, 138)',
}]

在 ASP .NET Core 中从数据库获取图表数据时遇到问题

Having trouble fetching data from database for chart in ASP .NET Core

c#

charts

chart.js

asp.net-core