使用 ASP.NET MVC 显示条形图答案

【问题标题】：Display bar graphs using ASP.NET MVC使用 ASP.NET MVC 显示条形图
【发布时间】：2023-03-08 09:41:02
【问题描述】：

我编写了一个代码以在表格视图中显示来自 DB 的数据。如何在条形图中显示相同的数据？

这是我的操作方法（更新）：

public ActionResult DataFromDataBase()
        {
            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
            {
                Formatting _jsonSetting = default;
                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");
            }
        }

查看以显示图表


<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

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

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

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

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

没有成功。使用 js 库来显示图表，但对我没有任何作用。有人可以帮忙吗？

【问题讨论】：

你用的是什么图表插件？
@Vidiya Prasanth 感谢您的回复。对我来说，这是新的，因此不知道如何从图表开始。
试试chartjs.org。它是开源且易于使用的
见上面更新的代码。还是没有成功

标签： c# asp.net-mvc asp.net-core asp.net-mvc-4

【解决方案1】：

通过下面的链接探索 chartjs 上的条形图，它是免费且易于使用的图表，

您只需要指定正确的数据对象检查以下示例

https://www.chartjs.org/docs/latest/charts/bar.html

【讨论】：

见上面更新的代码。还是没有成功