chartjs-无法读取未定义的属性“隐藏”

Question

我正在尝试在MVC C＃中实现chart.js，但遇到此错误。如果我从列表中加载，它可以工作，但是如果我更改为使用LINQ匿名类型，它将失败并显示错误消息：Uncaught TypeError：无法读取未定义的属性“ hidden”     在Chart.bundle.min.js：7

我的控制器是

[HttpPost]
    public JsonResult NewChart()
    {

        var iData = (from p in db.Products
                      join c in db.Categories
                      on p.CategoryID equals c.CategoryID
                      group p by c.CategoryName into CatName
                      select new { Value = CatName.Key, Count = CatName.Count() }).ToList();


        //Source data returned as JSON  
        return Json(iData, JsonRequestBehavior.AllowGet);
    }

我的观点是

@{
    ViewBag.Title = "About";
}
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="myChart" width="300" height="100"></canvas>
<script>
    $.ajax({
        type: "POST",
        url: "/Home/NewChart",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (chData) {
            var aData = chData;
            var aLabels = aData[0];
            var aDatasets1 = aData[1];
            var dataT = {
                labels: aLabels,
                datasets: [{
                    label: "Test Data",
                    data: aDatasets1,
                    fill: false,
                    backgroundColor: ["rgba(54, 162, 235, 0.2)", "rgba(255, 99, 132, 0.2)", "rgba(255, 159, 64, 0.2)", "rgba(255, 205, 86, 0.2)", "rgba(75, 192, 192, 0.2)", "rgba(153, 102, 255, 0.2)", "rgba(201, 203, 207, 0.2)"],
                    borderColor: ["rgb(54, 162, 235)", "rgb(255, 99, 132)", "rgb(255, 159, 64)", "rgb(255, 205, 86)", "rgb(75, 192, 192)", "rgb(153, 102, 255)", "rgb(201, 203, 207)"],
                    borderWidth: 1
                }]
            };
            var ctx = $("#myChart").get(0).getContext("2d");
            var myNewChart = new Chart(ctx, {
                type: 'bar',
                data: dataT,
                options: {
                    responsive: true,
                    title: { display: true, text: 'CHART.JS DEMO CHART' },
                    legend: { position: 'bottom' },
                    scales: {
                        xAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' } }],
                        yAxes: [{ gridLines: { display: false }, display: true, scaleLabel: { display: false, labelString: '' }, ticks: { stepSize: 50, beginAtZero: true } }]
                    },
                }
            });
        }
    });
</script>