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

Question

我遇到下一個問題->當我在前端使用由php echo標簽打印的編碼json字符串時，一切正常，但是當我想將其與angular get函數一起使用時，則無法正常工作。

Codeigniter控制器（后端）

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
         }

      });
   });