用 json 填充 CanvasJS答案

【问题标题】：Fill CanvasJS with json用 json 填充 CanvasJS
【发布时间】：2021-10-16 12:12:03
【问题描述】：

目前我正在尝试第一次使用 javascript 创建图表。我想在主页面使用填充图json方法在屏幕上显示数据。

当我检查 json 格式的 url 时，输出如下所示。

[
   {
      "CV_STATU":"Reddedildi",
      "MyCount":366
   },
   {
      "CV_STATU":null,
      "MyCount":23
   },
   {
      "CV_STATU":"Görüşmeye Bekleniyor",
      "MyCount":14
   }
]

但是当我调用主页（localhost:56569/Yonetim/Home/MainPage）时，什么都没有显示。

     public class HomeController : Controller
            {
          public ActionResult MainPage()
                {
        
                    var model = new CvViewModel();
                    return View(model);
                }
          public JsonResult FillChart()
                {
        
                    using (MULAKATDBEntities1 ent = new MULAKATDBEntities1())
                    {
        
                        var dbStatuList = ent.CV.GroupBy(x => new { x.CV_STATU }).Select(g => new { g.Key.CV_STATU , MyCount = g.Count() }).ToList();
        
                        return Json(JsonConvert.SerializeObject(dbStatuList), JsonRequestBehavior.AllowGet);
                    }
                }
        
        }

我的javascript代码如下：

    <html>
    <head>
        <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
    </head>
    
    
    <body>
        <div id="chartContainer" style="height: 300px; width: 100%;"/>
    </body>
    
    </html>
    
    <script type="text/javascript">
        window.onload()=function(){
            var dataPoints = [];
            $.getJSON("Yonetim/Home/FillChart", function (data) {
                for (var i = 0; i <= data.length - 1; i++) {
                    dataPoints.push({ label: data[i].CV_STATU, y: parseInt(data[i].MyCount) });
                }
                var chart = new CanvasJS.Chart("chartContainer", {
                    theme: "theme2",
                    title: {
                        text: "CanvasJS Charts "
                    },
                    data: [
                        {
                            type: "column",
                            dataPoints: dataPoints
                        }
                    ]
                });
                chart.render();
            });
        }
    </script>

如何在屏幕上创建包含 cv_statu 和 mycount 信息的图表？

【问题讨论】：

您能否像代码一样插入 JSON 以提高可读性，所以支持 JSON。
当然，我插入了
也许您面临 CORS 限制。控制台中是否有错误（浏览器中的 F12）？
我猜是 url 错误：localhost:56569/Yonetim/Home/Yonetim/Home/FillChart
我解决了错误但数据仍然没有填写

标签： javascript c# jquery json canvasjs

【解决方案1】：

这是一个可行的解决方案：

<html>
<head>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</head>
<body>
    <div id="chartContainer" style="height: 300px; width: 100%;" ></div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function() {
        $.getJSON("https://79723e01-80d8-4331-ad9f-5ec9b34a6857.mock.pstmn.io/Yonetim/Home/FillChart", function (data) {
            
            const dataPoints = data.map(point => {
                return {
                    label: point.CV_STATU,
                    y: parseInt(point.MyCount),
                }
            })

            const chart = new CanvasJS.Chart("chartContainer", {
                theme: "theme2",
                title: {
                    text: "CanvasJS Charts"
                },
                data: [
                    {
                        type: "column",
                        dataPoints: dataPoints
                    }
                ]
            });

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

您需要将$.getJSON 中的网址更改为您的。仅当您将页面作为服务器启动时，我的才能工作。

【讨论】：

我遇到了错误“data.map is not function”
我刚刚将代码从我的答案复制到编辑器，它对我有用。你用什么浏览器？
codesandbox.io/embed/… - 在这里查看，一切正常。