javascript - Highcharts 热图带来意想不到的结果

Question

按照他们网站上的示例，我(大部分!)成功地混合了他们的两个示例来显示热图

1. http://www.highcharts.com/demo/heatmap
2. http://www.highcharts.com/demo/heatmap-canvas

唯一的问题是，我似乎在图表中引入了约 30 度的倾斜，使得每天的列未对齐。我在这里发布了一个示例:

http://jsfiddle.net/richardarnatt/LMSDX/

xAxis: {
  type: 'datetime',
  labels: {
     align: 'left',
     x: 10,
  },
  tickInterval: 7*24*3600*1000
}

我尝试注释掉几行，看看它是否可以消除像差，但到目前为止我收效甚微。如果有人以前遇到过这种情况，我很高兴听到您的想法!

Answer 1

您似乎因未提供正确的日期而混淆了 x 轴。试试这个:

$.each(perfData, function(i,v){
    var d = new Date(perfData[i][0]);
    var x = d.getFullYear() + '-' + (d.getMonth()+1) + '-' + d.getDate();
    var y = d.getHours();
    var z = perfData[i][1]/1000;
    d.setHours(0);
    var a = [d.getTime(),y,z];
    mapData.push(a);
});

d.setHours(0) 确保一天中的每个点都从 x 轴上的同一位置开始。 d.getTime() 在 x 中输入正确的时间而不是字符串。

您还需要将 colSize 更改为一天:

colsize: 24*3600*1000,

并且刻度间隔为 1 天:

tickInterval: 24*3600*1000

http://jsfiddle.net/8Nptn/