将 ViewBag 更改为 Json 数组以在 .net MVC 中绘制条形图答案

【问题标题】：Change ViewBag to Json array to plot barchart in .net MVC将 ViewBag 更改为 Json 数组以在 .net MVC 中绘制条形图
【发布时间】：2019-05-20 21:09:47
【问题描述】：

我正在尝试将 ViewBag 更改为 Json 数组以在 .net MVC 框架中绘制图表。我尝试根据我发现以前的问题的解决方案解析 Json，但它什么也没显示。我的代码如下。

控制器

public  ActionResult RimChart()
    {
        List<RimCalcs> listOfCategggories = null;

        Connectors aConn = Connectors.GetInstance();
        listOfCategggories = aConn.GetRimCalc();
        var dates = listOfCategggories.Select(x => x.Date);
        var profits = listOfCategggories.Select(y => y.Rprofit);

        ViewBag.Date = dates;
        ViewBag.profit = profits;

        return View();

    }

剃刀视图

   <!DOCTYPE HTML>
  <html>
  <head>
  <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
   <script type="text/javascript">

    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "My First Chart in CanvasJS"
            },
            data: [
                {
                    // Change type to "doughnut", "line", "splineArea", etc.
                    type: "column",
                    dataPoints: [
                        { label: JSON.parse('@Html.Raw(ViewBag.profit)'), y: JSON.parse('@Html.Raw(ViewBag.Date)') },

                    ]
                }
            ]
        });
        chart.render();
    }
</script>
</head>
 <body>
 <div id="chartContainer" style="height: 300px; width: 100%;"></div>
 </body>
 </html>

【问题讨论】：

你的viewbag的内容不是JSON。为了将 JSON 解析为 JavaScript 对象，您首先要解析的内容实际上需要是 JSON。在服务器端，您需要将变量序列化为 JSON 字符串，然后将该字符串存储在视图包中

标签： javascript json asp.net-mvc

【解决方案1】：

已编辑 您可能想先序列化并进行解析

@{
        var profit = JsonConvert.SerializeObject(ViewBag.profit);
        var date = JsonConvert.SerializeObject(ViewBag.Date);
}

 window.onload = function () {

        var chart = new CanvasJS.Chart("chartContainer", {
            title: {
                text: "My First Chart in CanvasJS"
            },
            data: [
                {
                    // Change type to "doughnut", "line", "splineArea", etc.
                    type: "column",
                    dataPoints: [
                        { label: JSON.parse('@Html.Raw(profit)'), y: JSON.parse('@Html.Raw(date)') },

                    ]
                }
            ]
        });
        chart.render();
    }

或者你可以直接在控制器上序列化

public  ActionResult RimChart()
    {
        List<RimCalcs> listOfCategggories = null;

        Connectors aConn = Connectors.GetInstance();
        listOfCategggories = aConn.GetRimCalc();
        var dates = listOfCategggories.Select(x => x.Date);
        var profits = listOfCategggories.Select(y => y.Rprofit);

        ViewBag.Date = JsonConvert.SerializeObject(dates);
        ViewBag.profit = JsonConvert.SerializeObject(profits);

        return View();

    }

【讨论】：

同意，但我不会使用过时的 JavaScriptSerializer。甚至微软也停止使用它并开始使用 Newtonsoft.JSON 作为默认序列化程序
@ADyson 是的，你是对的，我已经编辑了答案
它工作得很好（转换为数组），但图表没有显示出来。我的 JavaScript 代码有错误吗？我正在使用 Canvas.js。我也尝试过使用 Chart.js，但还是一样。我注意到“数据”或 y 轴没有填充。谢谢
@NAHEEMOLANIYAN 我的猜测是您缺少 x 数组上的 x 值，这就是不渲染的原因。