在Chart.js中使用JSON和Angular.js

Question

我遇到了下一個問題 - >當我在前端使用由php echo標記打印的編碼json字符串時，一切正常，但是當我想用它角度獲得函數我不明白它的工作。

笨控制器（後端）

public function getLogs(){ 
     $this->load->model('Home_model'); 
     $logs = $this->Home_model->getLogs(); 
     echo json_encode($logs); 
    } 

AngularJs控制器（前端）

$http.get('index.php/Welcome/getLogs') 
      .then(function (response) { 
       json = response.data; 
      }); 


     var chartjsData = []; 
     for (var i = 0; i < json.length; i++) { 
      chartjsData.push(json[i].aantal); 
     } 

     var chartjsLabels = []; 
     for (var i = 0; i < json.length; i++) { 
      chartjsLabels.push(json[i].datum); 
     } 

     var ctx = document.getElementById('myChart').getContext('2d'); 
     var myChart = new Chart(ctx, { 
      type: 'line', 
      data: { 
       labels: chartjsLabels, 
       datasets: [{ 
        label: "Aantal meldingen", 
        borderColor: 'rgb(255, 131, 48)', 
        data: chartjsData, 
        fill: false 
       }] 
      }, 
      options: { 
       responsive: false 
      } 

     }); 

提前感謝！

Answer 1

因爲，該$http.get()方法是異步的，你需要初始化圖表的$http.get()回調函數裏面，像這樣......

$http.get('index.php/Welcome/getLogs') 
    .then(function(response) { 
     json = response.data; 

     json = JSON.parse(json); //parse JSON string (if needed) 

     var chartjsData = []; 
     for (var i = 0; i < json.length; i++) { 
     chartjsData.push(json[i].aantal); 
     } 

     var chartjsLabels = []; 
     for (var i = 0; i < json.length; i++) { 
     chartjsLabels.push(json[i].datum); 
     } 

     var ctx = document.getElementById('myChart').getContext('2d'); 
     var myChart = new Chart(ctx, { 
     type: 'line', 
     data: { 
      labels: chartjsLabels, 
      datasets: [{ 
       label: "Aantal meldingen", 
       borderColor: 'rgb(255, 131, 48)', 
       data: chartjsData, 
       fill: false 
      }] 
     }, 
     options: { 
      responsive: false 
     } 

     }); 
    });