2016-05-09 9 views
0

Ich versuche, eine Heatmap mit Highcharts zu erstellen, aber es wird nicht richtig geladen (nur Linien anstelle der Heatmap selbst).Highcharts Heat Map nicht korrekt angezeigt

ich die Daten aus einer JSON Datei laden:

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; 
}; 

Die Daten korrekt an der Konsole angemeldet wird, aber aus irgendeinem Grund, die Heatmap wird nicht geladen.

Ich habe auch eine Plunker erstellt, wo Sie ihr Verhalten sehen können.

Irgendwelche Ideen?

Antwort

1

Ich habe einen Fehler gemacht, als ich das Diagramm neu geladen habe. Ich hatte gerade die Art der Veranstaltung hinzuzufügen:

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

Plunker