Javascript 将SQL结果从控制器传递到chart.js

形势 我希望将SQL数据库中的X计数从控制器传递到视图，在视图中，图表将拾取该数据并进行渲染

我到目前为止所做的事情

到目前为止，我有控制器代码。它从表中获取计数，我试图将这个数字传递回图表

public ActionResult currentPopulation()
{            
    var dests = db.personal_info.Count();
   // return Json(dests, JsonRequestBehavior.AllowGet);
    return Content(JsonConvert.SerializeObject(dests), "application/json");
}

我还有视图中的图表（下面的代码）

<script>

        var barChartData = {
                    url: '/Home/currentPopulation',//Local
                  type: "GET",
                 dataType: "JSON",

            labels: ["A", "B", "C"],
            datasets: [

            {
             //   url: '/Home/currentPopulation',//Local
               //  type: "GET",
               //  dataType: "JSON",

                fillColor: "#26B99A", //rgba(220,220,220,0.5)
                strokeColor: "#26B99A", //rgba(220,220,220,0.8)
                highlightFill: "#36CAAB", //rgba(220,220,220,0.75)
                highlightStroke: "#36CAAB", //rgba(220,220,220,1)
                data: [51, 30, 40], //this is the hard coded values which the chart loads 
                                    //
            },

            ],
        }


        $(document).ready(function () {

  //  new Chart($("#canvas_bar").get(0).getContext("2d")).Bar()

new Chart($("#canvas_bar").get(0).getContext("2d")).Bar(barChartData, {
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
responsive: true,
barDatasetSpacing: 6,
barValueSpacing: 5
});

});

</script>

---

任何帮助都将不胜感激。

如果您希望您的控制器被击中，您需要发出ajax请求。这个ajax调用应该在您希望调用控制器的操作上完成。按钮点击等等。开始使用console.logs调试javascript

如果希望在打开页面时执行此代码，请将ajax调用包装到

document.ready

函数中

   $.ajax({
        type: "POST",
        url: "Home/currentPopulation",
        //data: jsonData, if you need to post some data to the controller.
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        error: OnErrorCall
    });

    function OnSuccess(response) {
        var aData = response.d;
        console.log(aData);
        //build here your **data** as object wanted by Bar. Colors which you want and so on, options could be empty object {}. I think is possible to call bar without options, you need to read the documentation.

        var ctx = $("#myChart").get(0).getContext("2d");
        var myBarChart = new Chart(ctx).Bar(data, options);
    }

    function OnErrorCall(response)
    {
        alert('error');
    }

在这里，我给你展示了一个小例子。你可以用mvc搜索google chart.js，这里有很多例子。检查url是否正确写入我认为您应该删除乞讨中的/

这只是建议。

此外，如果你有钱，而且这是一个严肃的图表项目，请使用highcharts.js！这是最好的库，它可以完全脱机工作，并为您提供非常好的灵活性

有用链接：

   $.ajax({
        type: "POST",
        url: "Home/currentPopulation",
        //data: jsonData, if you need to post some data to the controller.
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: OnSuccess,
        error: OnErrorCall
    });

    function OnSuccess(response) {
        var aData = response.d;
        console.log(aData);
        //build here your **data** as object wanted by Bar. Colors which you want and so on, options could be empty object {}. I think is possible to call bar without options, you need to read the documentation.

        var ctx = $("#myChart").get(0).getContext("2d");
        var myBarChart = new Chart(ctx).Bar(data, options);
    }

    function OnErrorCall(response)
    {
        alert('error');
    }