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。

如果您希望在打开的页面上执行此代码，请在document.ready函数中包装ajax调用。

   $.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 documentation

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

1 个答案: