javascript - Highcharts 错误 "cannot read property of undefined"

Question

我正在使用 Highcharts 创建图表(并从 JSON 文件获取数据)。但是，我得到了 TypeError: Cannot read property 'map' of undefined。

我有以下代码:

myData.get(function (data) {
      $scope.loadData = data;
    });


$('#container').highcharts({

    xAxis: {
        type: 'datetime'
    },

    series: [{
        name: 'Temperature',
        data: $scope.loadData.map(function(d) {
          return [d.timestamp, d.actual];
        })
    }, {
        name: 'Range',
        data: $scope.loadData.map(function(d) {
          return [d.timestamp, d.min, d.max];
        }),
        type: 'arearange'
    }]
});

我还创建了一个 Plunker .

有什么关于我在这里做错的提示吗？

Answer 1

所以我将您的 Plunkr 更改为一个工作示例:http://plnkr.co/edit/Q4z6NdVtp3TRMKgmH5tc?p=preview

首先，在您的 data.json 中，您将时间戳 添加为字符串。 Highchart 不接受这一点。

我更改了工厂以通过 $http 获取 JSON 数据

.factory('myData', function($http) { 
    return {
     getData : function () {
       var data = [];
      data = $http.get('data.json');
      return data;
     }
  }
})

在 getData 的回调中，我构建了图表:

myData.getData().then(function(response) { 
    $scope.loadData = response.data;

    $('#container').highcharts({

        xAxis: {
            type: 'datetime'
        },

        series: [{
            name: 'Temperature',
            data: [$scope.loadData.timestamp, $scope.loadData.actual]
        }, 
        {
            name: 'Range',
            data: [$scope.loadData.timestamp, $scope.loadData.min, $scope.loadData.max],
            type: 'arearange'
        }]
    });
  });