使用js库的ASP.NET MVC中的图表

Question

我尝试了几件事来使用 js 库在图表中显示数据，但没有成功。

我正在寻找的是在 X 轴上显示 WeekStart Date，并在栏的顶部显示一个栏，显示该周的聊天总数。

下面是我写到现在的代码，但没有显示结果。

非常感谢您的帮助。

1. 动作方法

public ActionResult Dashboard()
{
    var mostRecentMonday = DateTime.Now.AddDays(-7).StartOfWeek(DayOfWeek.Monday);
    var weekEnd = mostRecentMonday.AddDays(7).AddSeconds(-1); //will return the end of the day on Sunday

    ViewBag.Monday = mostRecentMonday;
    ViewBag.lastWeekSunday = weekEnd;

    try
    {
        ViewBag.DataPoints = JsonConvert.SerializeObject(_db.Chats.Where(x => System.Data.Entity.DbFunctions.TruncateTime(x.MSTChatCreatedDateTime) >= mostRecentMonday
                   && System.Data.Entity.DbFunctions.TruncateTime(x.MSTChatCreatedDateTime) <= weekEnd).GroupBy(a => System.Data.Entity.DbFunctions.TruncateTime(a.MSTChatCreatedDateTime)).Select(b => new ReportVM()
                   {
                       CreatdDate = b.Key,
                       ChatCountCreatdDate = b.Count()

                   }).ToList(), _jsonSetting);

        return View();
    }
    catch (System.Data.Entity.Core.EntityException)
    {
        return View("Error");
    }
    catch (System.Data.SqlClient.SqlException)
    {
        return View("Error");
    }
}

JsonSerializerSettings _jsonSetting = new JsonSerializerSettings() { NullValueHandling = NullValueHandling.Ignore };

2. 仪表板视图

<head>
    <script src="~/Content/vendor/chart.js/Chart.min.js"></script>
</head>

<body>
    <div id="chartContainer"></div>

    

    <script type="text/javascript">
        
        var dataPoints =[];
        for (var i in ViewBag.DataPoints){
            dataPoints.push({label:result[i].x, y:result[i].y});
        }

        window.onload = function() {
            var chart = new CanvasJS.Chart("chartContainer", {
                theme: "light2",
                zoomEnabled: true,
                animationEnabled: true,
                title: {
                    text: "Line Chart with Data-Points from DataBase"
                },
                data: [
                {
                    type: "barcode",

                    dataPoints: dataPoints,
                }
                ]
            });
            chart.render();
        };
    </script>
</body>

先感谢您。