饼图未填充 Asp.Net MVC 页面

Question

我在使用 Chart.js 填充饼图时遇到问题。图表图例出现，但值未定义。

Cshml

@page
@model FinalProject.Pages.Exam.ReportModel
@{
    Layout = null;
}

<h2>Letter Grade Report</h2>
<table>
    <tr>
        <th>Exam ID</th>
        <th>Student ID</th>
        <th>Score</th>
        <th>Letter Grade</th>
    </tr>
    @foreach (var exam in Model.Exams)
    {
        <tr>
            <td>@exam.ExamId</td>
            <td>@exam.StudentID</td>
            <td>@exam.Score</td>
            <td>@FinalProject.Pages.Exam.ReportModel.CalculateLetterGrade(exam.Score)</td>
        </tr>
    }
</table>

<h2>Letter Grade Summary</h2>
<table>
    <tr>
        <th>Letter Grade</th>
        <th>Total Count</th>
    </tr>
    @foreach (var gradeSummary in Model.GradeSummary)
    {
        <tr>
            <td>@gradeSummary.LetterGrade</td>
            <td>@gradeSummary.TotalCount</td>
        </tr>
    }
</table>

<!-- Add Chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.min.js"></script>

<h2>Letter Grade Distribution (Pie Chart)</h2>
<div style="max-height:300px;">
    <canvas id="gradeChart"></canvas>
</div>

<script>
    let gradeData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model.GradeSummary));

    const data = {
        labels: gradeData.map(g => g.letterGrade),
        datasets: [{
            label: 'Grade Distribution',
            data: gradeData.map(g => g.totalCount),
            backgroundColor: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
            hoverOffset: 4
        }]
    };

    const config = {
        type: 'pie',
        data: data,
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    };

    new Chart(document.getElementById('gradeChart'), config);
</script>

Cshtml.cs

using Microsoft.AspNetCore.Mvc.RazorPages;
using School.DAL;
using System;
using System.Collections.Generic;
using System.Linq;

namespace FinalProject.Pages.Exam
{
    public class ReportModel : PageModel
    {
        private readonly IExamAdapter _examAdapter;

        public ReportModel(IExamAdapter examAdapter)
        {
            _examAdapter = examAdapter;
        }

        public List<School.DAL.Exam> Exams { get; set; }
        public List<GradeSummary> GradeSummary { get; set; }

        public void OnGet()
        {
            Exams = _examAdapter.GetAll().ToList();

            // Calculate letter grades and generate summary
            GradeSummary = CalculateGradeSummary(Exams);
        }

        private List<GradeSummary> CalculateGradeSummary(List<School.DAL.Exam> exams)
        {
            var gradeSummary = new List<GradeSummary>();

            var gradeGroups = exams.GroupBy(e => CalculateLetterGrade(e.Score));

            foreach (var group in gradeGroups)
            {
                gradeSummary.Add(new GradeSummary
                {
                    LetterGrade = group.Key,
                    TotalCount = group.Count()
                });
            }

            return gradeSummary;
        }

        public static string CalculateLetterGrade(string score)
        {
            if (int.TryParse(score, out int scoreValue))
            {
                if (scoreValue >= 90) return "A";
                else if (scoreValue >= 80) return "B";
                else if (scoreValue >= 70) return "C";
                else if (scoreValue >= 60) return "D";
                else return "F";
            }
            else
            {
                // Handle the case where score is not a valid integer (e.g., invalid input)
                return "Invalid";
            }
        }
    }

    public class GradeSummary
    {
        public string LetterGrade { get; set; }
        public int TotalCount { get; set; }
    }
}

这是当前显示的内容：

我尝试更改脚本，并考虑使用适配器而不是使用我正在使用的方法，但我觉得这是一个简单的解决方案。数据全部来自网站上的 CRUD 操作，并且是我添加的，因此数据不是静态的。考试成绩来自另一个具有自己的 CRUD 操作的模型（edit.cshtml、edit.cshtml.cs、delete.cshtml.....），此页面用于报告和绘制考试成绩图表

Answer 1

根据字母等级汇总表中的属性，属性采用 Pascal 大小写。但在你的 JavaScript 代码中，它是驼峰式大小写。

修改Pascal's Case格式的属性。

const data = {
    labels: gradeData.map(g => g.LetterGrade),
    datasets: [{
        label: 'Grade Distribution',
        data: gradeData.map(g => g.TotalCount),
        backgroundColor: ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
        hoverOffset: 4
    }]
};