Highcharts 热图显示不正确

Question

我正在尝试使用 Highcharts 创建热图，但加载不正确（只是线条而不是热图本身）。

我正在从 JSON 文件加载数据：

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

数据已正确记录到控制台，但由于某种原因，热图未加载。

我还创建了一个 Plunker，您可以在其中查看其行为。

有什么想法吗？

Answer 1

我在重新加载图表时出错了。我只需要将类型添加到事件中：

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

Plunker

Highcharts 热图显示不正确

Highcharts heat map not displaying properly

javascript

heatmap

highcharts

angularjs