Highcharts热图无法正确显示

Question

I'm trying to create a heat map using Highcharts but it's not loading properly (just lines instead of the heat map itself).

I'm loading the data from a JSON file:

chart: {
  type: 'heatmap',
  marginTop: 40,
  marginBottom: 80,
  plotBorderWidth: 1
},

xAxis: {
  categories: $scope.loadDays()
},

yAxis: {
 categories: $scope.loadHours(),
 title: null,
 reversed: true
},

series: [{
  name: null,
  borderWidth: 1,
  data: [],
  dataLabels: {
    enabled: true,
    color: '#000000'
  }
}]

$scope.getHeatMapData = function(data) {
  var response = [];
  $scope.data = data;

  if(data && $scope.data.timestamps && $scope.data.info) {
    $scope.data.timestamps.forEach(function(element, index) {
      if ($scope.data.info[index]) {
        response.push([
          moment(element).day(),
          moment(element).hour(),
          $scope.data.info[index]
       ]);
      }
    });
  }
  return response;
};

The data is being logged correctly to the console but, for some reason, the heat map isn't loading.

I've also created a Plunker where you can see its behavior.

Any ideas?

Answer 1

I was making a mistake when reloading the chart. I just had to add the type to the event:

chartConfig.chart = { type: 'heatmap', events: { load: callback } };

Plunker