TypeError:无法读取属性'数据集'未定义 - 角度图

时间:2015-11-28 13:20:22

标签: javascript jquery angularjs charts angular-chart

我正在尝试使用角度图表显示图表。但我收到以下错误:

TypeError:无法读取属性'数据集'未定义的     at Object.i.Type.extend.initialize(http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js:9:27506)     at Object.e.Type(http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js:9:9713)     at Object.s(http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js:9:12974)     在e。(匿名函数)[as Bar](http://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js:9:13316

我的代码:

app.controller('graphController', ['$scope', '$kinvey','$location', function($scope, $kinvey, $location) {
$scope.popula = function(){ 
  var query = new $kinvey.Query();   
  query.equalTo('idColetor', 659238569);                          
  query.descending('tsmilliseconds').limit(7);
  var promise = $kinvey.DataStore.find('dataBase', query); 
  promise.then(function(response) {   
  arrayVelocidade = [];
  for(var j = response.length - 1; j >= 0 ; j--) {          
      arrayVelocidade.push(response[j].veloc);    
    }
  drawLineChart(arrayVelocidade);


});
};


function drawLineChart(arrayVelocidade){

  $scope.lineChartData = {
      labels: ["30", "25", "20", "15", "10", "05", "0"],
      datasets: [
      {
        label: "Velocidade",
        fillColor: "rgba(220,220,220,0.2)",
        strokeColor: "rgba(220,220,220,1)",
        pointColor: "rgba(220,220,220,1)",
        pointStrokeColor: "#fff",
        pointHighlightFill: "#fff",
        pointHighlightStroke: "rgba(220,220,220,1)",
        data: arrayVelocidade
      }
      ]
    };
    $scope.activeData = $scope.lineChartData;
}



}
]);

在我打电话的索引页面中:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
<script src="http://da189i1jfloii.cloudfront.net/js/kinvey-angular-1.5.1.min.js"></script> 
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1-beta.2/Chart.min.js"></script>
<script type="text/javascript" src="dist/angular-chartjs.min.js"></script>
<script src="js/jquery.js"></script>

任何信息都会有所帮助。谢谢!

1 个答案:

答案 0 :(得分:4)

angular-chart期望输入数据采用某种格式(它与Chart.js不完全相同)。尝试将输入数据格式化为http://jtblin.github.io/angular-chart.js/

处的样本
angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) {

  $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
  $scope.series = ['Series A', 'Series B'];
  $scope.data = [
    [65, 59, 80, 81, 56, 55, 40],
    [28, 48, 40, 19, 86, 27, 90]
  ];
});

请注意,data只是一个数组数组,而不是Chart.js中的对象,而labels是一个单独的数组。