Angular js 中带有 JSON 对象的图表

Question

我正在尝试在 angular js 中实现图表表示。

http://jtblin.github.io/angular-chart.js/

我能够实现简单的图表，但我有以下数据要表示。它采用 JSON 格式。我需要有关如何将 JSON 转换为要表示为图表的数组的帮助。下面是JSON

[{"value": {"DE":2,"NP":20,"BD":28,"TW":1},
  "end_time":"2016-07-05T07:00:00+0000"},
 {"value":{"DE":5,"NP":11,"BD":22,"BE":2,"FJ":2},
  "end_time":"2016-07-06T07:00:00+0000"},
 {"value":{"DE":5,"NP":24,"BD":29},
  "end_time":"2016-07-07T07:00:00+0000"}]

我正在尝试将其转换为

格式

$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]
];

我知道我需要遍历 JSON 对象并创建数组。

我的问题是每个 JSON 对象中都有不同的标签。我如何转换它创建一个包含每个值中所有标签的数组，并仍然保持 counts.Like 低于

的顺序

$scope.labels = ["DE", "NP", "BD", "TW", "BE", "FJ"];
$scope.series = ["2016-07-05T07:00:00+0000","2016-07-06T07:00:00+0000","2016-07-07T07:00:00+0000"]
$scope.data = [ [2,20,28,1,0,0],
                [5,11,22,0,2,2],
                [5,24,29]
              ]

如果在 angularjs 中使用不同的库或图表可以更好地实现这一点，请提出建议

Answer 1

你尝试过什么吗？您没有显示任何解决方案。无论如何，这是一个可能的实现

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


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

  var values = []
  Object.keys(item.value).forEach(function(key) {
    if ($scope.labels.indexOf(key) === -1) {
     $scope.labels.push(key)
    }
    values.push(item.value[key])
  })
  $scope.data.push(values)
})
console.log($scope)

Angular js 中带有 JSON 对象的图表

Charts in Angular js with JSON Object

javascript

json

angularjs

chart.js

angular-chart