无法通过图表绘制数据集的条形图.js库

Question

我在angularjs中使用charts.js库。我无法找出错误，但图表和标签都没有被填充。数据存储在数组中，但我认为我编写的图形代码存在一些问题。我正在点击一个 api 来获取我用作数据集来绘制图形的 json 响应。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http){
  $scope.labelArr = []; 
  $scope.valueArr = [];
  $http.get("https://api.coinmarketcap.com/v1/ticker/limit=10")
    .then(function(resp){
       $scope.result = resp.data;
       angular.forEach($scope.result, function(value, key){
         $scope.labelArr.push(value.name);
         $scope.valueArr.push(value.price_usd);
       });
       console.log($scope.labelArr); 
       console.log($scope.valueArr);
    }, function(err){
         $scope.result = "Error";
    });       
   var ctx = document.getElementById("dvCanvas").getContext('2d');
   var myChart = new Chart(ctx, {
       type: 'bar',  
       data: {
          labels: $scope.labelArr,
           datasets: [{
               //data: $scope.valueArr,
               label:'# of Votes',
               data: [5626.63, 307.937, 0.214696, 335.513, 58.2737, 296.443, 0.208032, 31.9542, 196.835, 89.7169],
               backgroundColor: [
                 'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)',
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)'
                ],
                borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)',
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)'
                ],
                borderWidth: 1
           }]
       },
       options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
        }
   });
});

Answer 1

处理异步调用总是会带来混乱。JavaScript 通过引入 Promise 解决了大部分问题，因此您可以更好地处理异步回调。Angular在$http和$q服务方面具有相同的概念。

您的数据以异步方式到达，为了使用这些回调中的数据，您需要处理延迟。一种方法是从函数调用中解析承诺$http.get。常见的模式是：

return $http.get(url).then((res) => {
    return res.data;
});

从处理控制器逻辑的服务/工厂返回后，您可以使用your_promise.then((res)=>{ /* main code */ })

替代解决方案是链接您的承诺并最终以以下形式执行代码的另一部分：finally(callback, notifyCallback) 。常见的模式是：

$http.get(url).then((res) => {
    $scope.data = res.data;
}).finally(() => {
    // main code where you populate functions with $scope.data
    /* ... */
});