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

Question

情况我想将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>

问题

我的问题是，我无法用[51,30,40]替换应该来自控制器的A，B，C值。 我有点困惑，因为我的动作“ currentPopulation”没有被调用，并且我无法根据代码移动链接原因，数据是从barChartData中提取的，并在调用新图表时分配。

new Chart($("#canvas_bar").get(0).getContext("2d")).Bar(barChartData, {

任何帮助，将不胜感激。

Answer 1

如果您想击中控制器，则需要发出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有很多示例。 检查网址是否正确写入，我认为您应该在乞求中删除/。

这只是建议。

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

有用的链接：

ChartJS文档