Javascript “高图表错误”；无法读取未定义的属性"；

我正在使用Highcharts创建一个图表（并从JSON文件获取数据）。但是，我得到了

类型错误：无法读取未定义的属性“map”

我有以下代码：

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'
    }]
});

我还创建了一个

---

有关于我做错了什么的提示吗？

这是异步调用：

myData.get(function (data) {
    console.log("myData.Get");
    $scope.loadData = data;
});

因此，

$（“#container”）.highcharts（{…

将在设置数据之前运行

$scope.loadData=data；

您必须在

myData

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'
            }]
        });

});

---

因此，我将您的Plunkr更改为一个工作示例：

首先，在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'
        }]
    });
  });

---

$scope.loadData应该是一个数组，因此如果您只在控制器上添加$scope.loadData=[]；至少不会再次出现此错误。虽然如此，但它仍然没有打印数据：/tks，我会查看一下。我明白了。谢谢您的示例。虽然数据加载不正确，但我会深入研究。tks.：）可能是因为我在您的data.json中添加了随机时间点；-）我不这么认为，我将时间戳更改为实际的时间戳，但它仍然没有正确显示。没有错误，但它只显示了两个点和错误的数字（并且它没有显示范围系列）。看起来您的数据点不成比例，因为当我们参考特定点时，范围会正确打印：