使用ASP显示条形图.NET MVC

Question

我编写了一段代码，在表视图中显示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库来显示图形，但对我来说什么都不起作用。有人能帮忙吗？

Answer 1

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

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

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