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通过引入Promises解决了大部分问题，因此您可以更好地处理异步回调。 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
    /* ... */
});

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

1 个答案: