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

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

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

唯一的问题是，我似乎在图表中引入了约 30 度的倾斜，这样每天的column未对准。我在这里发布了一个例子：

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

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

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

您似乎因未提供正确的日期而混淆了 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/ http://jsfiddle.net/8Nptn/