javascript - Highcharts error "cannot read property of undefined" - Stack Overflow

admin管理员组

文章数量:1399915

I'm creating a chart using Highcharts (and getting the data from a JSON file). However, I'm getting TypeError: Cannot read property 'map' of undefined.

I have the following code:

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

I've also created a Plunker.

Any tips on what I'm doing wrong here?

I'm creating a chart using Highcharts (and getting the data from a JSON file). However, I'm getting TypeError: Cannot read property 'map' of undefined.

I have the following code:

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

I've also created a Plunker.

Any tips on what I'm doing wrong here?

• javascript
• angularjs
• highcharts

Share Improve this question Follow asked May 3, 2016 at 12:46 superjimsuperjim 8111 gold badge22 silver badges1010 bronze badges 2

• $scope.loadData is supposed to be an array, so if you just add $scope.loadData = []; on top of your controller, at least you won't have this error again. plnkr.co/edit/xcKPn8zbk6hpmjiQ7ZhW?p=preview – Matheno Commented May 3, 2016 at 12:54
• true but it's still not printing the data :/ – superjim Commented May 3, 2016 at 13:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

So I changed your Plunkr to a working example: http://plnkr.co/edit/Q4z6NdVtp3TRMKgmH5tc?p=preview

First of all, in your data.json you have timestamps added as strings. Highchart does not accept that.

I changed the factory to get JSON data via $http

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

In the callback of getData I build the chart:

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

this is asynchronous call :

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

So $('#container').highcharts({... will run before the data is set $scope.loadData = data;

you have to move the code inside the callback of 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'
            }]
        });

});

本文标签： javascriptHighcharts error quotcannot read property of undefinedquotStack Overflow