0

为了显示我的数据库中的一些数据，我想使用这个漂亮的图形库（Angular Chart）。

数据的格式让我有点困惑，我有一些来自我的数据库的不错的 JSON 数据，格式如下：

{ "data": [
        {
          "meting": "749",
          "bericht": "408",
          "plant": "01",
          "timestamp": "2016-03-18T09:40:58.977051"
        },
        {
          "meting": "775",
          "bericht": "177",
          "plant": "01",
          "timestamp": "2016-03-18T07:35:59.007320"
        }
      ]
    };

但是对于这些图表，我需要将它放在这样的数组中：

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

我相信这是一种糟糕的数据格式，但无论如何我都愿意使用这个库。

现在我如何从我的数据中获取这些疯狂的丑陋数组？

我当前的代码是这样的，但我确信有更好的方法可以做到这一点，但我无法$scope.data正确，所以现在它是硬编码的。

// data test
$scope.zdata = 
    { "data": [
        {
          "meting": "749",
          "bericht": "408",
          "plant": "01",
          "timestamp": "2016-03-18T09:40:58.977051"
        },
        {
          "meting": "775",
          "bericht": "177",
          "plant": "01",
          "timestamp": "2016-03-18T07:35:59.007320"
        }
      ]
    };

$scope.labels = [];
$scope.series = [];
$scope.data = [];

var datalength = $scope.zdata.data.length;

for (var i = 0; i < datalength; i++) {
    $scope.labels.push($scope.zdata.data[i].timestamp);
}

for (var i = 0; i < datalength; i++) {
    $scope.series.push($scope.zdata.data[i].plant);
}

$scope.data = [
  [65, 59, 80, 81, 56, 55, 40]
];
4

3 回答 3

2

数据数组是一个多维数组，因为它可能有多条线或条。您可能会觉得它很难看，但它是非常常见的编程技术；）如果您只有一个系列，您只需将数据设置为$scope.data = [[]];并将元素推送到第一个内部数组（索引 0）。您也不需要循环多次，您可以在一个循环中完成。

$scope.labels = [];
$scope.series = [];
$scope.data = [[]];

for (var i = 0, l = $scope.zdata.data.length; i < l; i++) {
    $scope.labels.push($scope.zdata.data[i].timestamp);
    $scope.series.push($scope.zdata.data[i].plant);
    $scope.data[0].push($scope.zdata.data[i].meting); // assuming this is what you want to use as the values for the chart points
}

而不是 for 循环，您可以使用forEach：

$scope.labels = [];
$scope.series = [];
$scope.data = [[]];

$scope.zdata.data.forEach(function (zdata) {
    $scope.labels.push(zdata.timestamp);
    $scope.series.push(zdata.plant);
    $scope.data[0].push(zdata.meting);
});
于 2016-03-19T06:05:52.323 回答
1

我认为最好使用 javascript map函数只查看一次数组对象。

jsfiddle

于 2016-03-18T12:13:21.383 回答
1

我也在使用charts.js，我的代码和你的一样……我选择这种方式是因为我的对象中有大量数据。

于 2016-03-18T17:59:36.903 回答