ASP.NET MVC：来自 JSON 数据 ViewBag 的条形图答案

【问题标题】：ASP.NET MVC: Bar Chart from JSON Data ViewBagASP.NET MVC：来自 JSON 数据 ViewBag 的条形图
【发布时间】：2020-07-20 04:09:18
【问题描述】：

我有一个来自如下数据库的 JSON 数据，用于在仪表板 ASP.NET MVC 中构建仪表板。我想绘制一个每日和每月条形图，其中 x 轴作为日期时间（天），y 轴作为一天中的活动计数。

JSON 数据：

 [{"count":42,"datetime":"2020-07-18T00:00:00"},{"count":49,"datetime":"2020-07-16T00:00:00"},{"count":90,"datetime":"2020-07-14T00:00:00"},{"count":85,"datetime":"2020-07-17T00:00:00"},{"count":100,"datetime":"2020-07-13T00:00:00"},{"count":38,"datetime":"2020-07-19T00:00:00"},{"count":53,"datetime":"2020-07-15T00:00:00"}]

我想要这样的东西

我尝试了以下 javascript 代码，但不能。从 ViewBag.dataItems 获取的 JSON 数据

<script type="text/javascript" >
window.onload = function () {
 
var result = @Html.Raw(ViewBag.dataItems);
var DataItem =[];
    for (var i = 0; i < result.length; i++){
        DataItem.push({
            x: new Date(result[i].datetime),
            y: result[i].count
        });
}
var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    data: [{
        type: "column",
        DataItem: DataItem
    }]
});

chart.render();
 
};
</script>

谢谢你

【问题讨论】：

你用的是canvasjs.chart，对吧？
是的，我正在使用 canvas.js @Tomato32
我发布了答案。你可以检查一下，我的朋友。
不客气，我的朋友：d.

标签： c# asp.net .net asp.net-mvc charts

【解决方案1】：

当我提到来自 https://canvasjs.com/docs/charts/chart-types/html5-column-chart/ 的一些示例时，他们使用 dataPoints 属性而不是 DataItem。

这是一个跟踪您的数据的示例。希望能帮到你，我的朋友:))

1. Controllers

    public ActionResult Add()
            {            
                ViewData["data"] = @"[{'count':42,'datetime':'2020-07-18T00:00:00'},{'count':49,'datetime':'2020-07-16T00:00:00'},{'count':90,'datetime':'2020-07-14T00:00:00'},{'count':85,'datetime':'2020-07-17T00:00:00'},{'count':100,'datetime':'2020-07-13T00:00:00'},{'count':38,'datetime':'2020-07-19T00:00:00'},{'count':53,'datetime':'2020-07-15T00:00:00'}]";
                return View();
            }

2. Views

    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script type="text/javascript">

        window.onload = function () {

            var result = @Html.Raw(ViewData["data"]);
            this.console.log(result);

            var DataItem = [];
            for (var i = 0; i < result.length; i++) {
                DataItem.push({
                    x: new Date(result[i].datetime),
                    y: result[i].count
                });
            }
            var chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                title: {
                    text: "Date Time Formatting"   
                },
                data: [{
                    type: "column",
                    dataPoints: DataItem
                }]
            });

            chart.render();
    
}
    </script>

【讨论】：