Передача результатов SQL от контроллера к chart.js

Question

Ситуация Я хотел бы передать счет X из моей базы данных SQL из моего контроллера в мое представление, где диаграмма берет эти данные и отображает их.

То, что я сделал до сих пор

До сих пор у меня есть код контроллера. который получает счет из таблицы, и я пытаюсь передать эту цифру на график.

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'); 
    } 

Здесь я покажу вам небольшой пример, как это сделать. Вы можете просто google chart.js с mvc, есть много примеров. Проверьте правильность написания URL-адреса. Думаю, вы должны удалить/в попрошайничестве.

Это просто предложение.

Также, если у вас были деньги, и это серьезный проект диаграммы, используйте highcharts.js! Это лучшая библиотека, которая может работать полностью автономно и дает вам действительно хорошую гибкость.

Полезные ссылки:

ChartJS documentation