使用json数据创建图表

时间:2017-03-28 15:17:44

标签: javascript jquery angularjs json angular-chart

我有以下JSON数据,我试图使用AngularJS创建折线图。但是,使用地图功能,我可以获得$scope.labels但无法形成$scope.series$scope.data

这是我的JS代码:

var source = [
  {"DE":2,"NP":20,"BD":28,"TW":1,
  "end_time":"2016-07-05T07:00:00+0000","date":"01-01-2011"},
  {"DE":5,"NP":11,"BD":22,"BE":2,"FJ":2,
  "end_time":"2016-07-06T07:00:00+0000","date":"01-09-2011"},
  {"DE":5,"NP":24,"BD":29,
  "end_time":"2016-07-07T07:00:00+0000","date":"01-11-2011"}
]
var $scope = {};
$scope.labels = [];
$scope.data = [];
$scope.series = [];


source.forEach(function(item){
  $scope.labels.push(item.end_time)
})

如何从JSON获取数据以形成如下所示的系列和数据。

$scope.series = ["DE","NP","BD","TW"]

$scope.data = [] ---> //Stuck here in forming data

JSfiddle

1 个答案:

答案 0 :(得分:0)

如果改变迭代数据的方式,这应该变得相当简单:

angular.forEach(source, function(item){
  $scope.labels.push(item.end_time);
  angular.forEach(item, function(val, key) {
    if(key === 'end_time') return;
    $scope.data.push(val);
    $scope.series.push(key);
  });
})

Updated Fiddle

Angular的forEach将帮助您迭代对象。