用 json 填充 CanvasJS

Question

目前我第一次尝试使用 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 信息的图表？

Answer 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 中的 url 更改为您的。只有当您将页面作为服务器启动时，我的才会工作。

用 json 填充 CanvasJS

Fill CanvasJS with json

javascript

c#

jquery

json

canvasjs