如何使用 JSON 和 ChartJS 制作一个显示某个年龄段人数的饼图？

Question

我一直在尝试调整上一个问题中的代码，我使用 JSON 处理程序从控制器中的数据库中提取数据。

现在，我正在尝试创建一个显示不同年龄段的饼图。我使用 Count() 来获取这里的数字

var lessthreefive = Model.employees.Where(a => a.Status == "FTE" || a.Status == "PTE").Select(b => b.Age).Where(c => c <= 35).Count();
var lessfournine = Model.employees.Where(a => a.Status == "FTE" || a.Status == "PTE").Select(b => b.Age).Where(c => c > 35 && c <= 49).Count();
var lessfivefive = Model.employees.Where(a => a.Status == "FTE" || a.Status == "PTE").Select(b => b.Age).Where(c => c > 49 && c <= 55).Count();
var lesssixzero = Model.employees.Where(a => a.Status == "FTE" || a.Status == "PTE").Select(b => b.Age).Where(c => c > 55 && c <= 60).Count();
var lesssixfive = Model.employees.Where(a => a.Status == "FTE" || a.Status == "PTE").Select(b => b.Age).Where(c => c > 60 && c <= 65).Count();
var moresixfive = Model.employees.Where(a => a.Status == "FTE" || a.Status == "PTE").Select(b => b.Age).Where(c => c > 65).Count();

FTE 和 PTE 分别是全职和兼职工作。这是为了确保这些数字仅适用于现有员工，因为也有辞职员工的数据。

尝试做这样的事情

Answer 1

在关注 Nagib 的评论链接后自己想通了。

把它留在这里，以防其他人尝试同样的事情。

$(document).ready(function () {
    $.ajax({
        type: "Get",
        url: "/?handler=ageData",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {

            var datatf = response.below35;
            var datafn = response.below49;
            var dataff = response.below55;
            var dataso = response.below60;
            var datasf = response.below65;
            var dataasf = response.above65;

            var cage = document.getElementById('ageChart').getContext('2d');
            var ageChart = new Chart(cage, {
                type: 'pie',
                data: {
                    labels: ['< 36', '36 - 49', '50 - 55', '56 - 60', '61 - 65', '> 65'],
                    datasets: [{
                        label: 'Age Group',
                        data: [datatf, datafn, dataff, dataso, datasf, dataasf],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255, 99, 132, 1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }
    });
});

在我的处理程序中，变量与问题中的变量相同，并使用JsonResult {...below35 = lessthreefive...} 调用它

最终结果