使用 js 库在 ASP.NET MVC 中绘制图表

如何解决使用 js 库在 ASP.NET MVC 中绘制图表

我尝试了一些方法来使用 js 库在图表中显示数据，但没有成功。

我正在寻找的是在 X 轴上显示 WeekStart 日期，并在条形顶部显示一个条形图，显示该周进行的聊天总数。

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

非常感谢您的帮助。

操作方法

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 };

仪表板视图

<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>

提前致谢。