在他们网站上的例子之后，我已经（主要是！）成功地得到了他们的两个例子的混合体，以显示热图
xAxis：{
类型：'datetime'，
标签：{
align：'left'，
x：10，
}，
tickInterval：7 * 24 * 3600 * 1000
}
我已经尝试过注释行以查看它是否消除了畸变，但到目前为止，我的成功很少。如果有人遇到过这种情况，我会很高兴听到你的想法！
解决方案 看起来你很困惑x轴通过不提供适当的日期。试试这个：
$ $ p $ $。each（perfData，function（i，v）{
var d = new Date（ ）;
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
Following the examples on their website, I have (mostly!) succeeded in arriving at a hybrid of their two examples to show a heatmap
The only problem is, I seem to have introduced a ~30degree slant to the diagram such that each day's column is misaligned. I have posted an example here:
http://jsfiddle.net/richardarnatt/LMSDX/
xAxis: {
type: 'datetime',
labels: {
align: 'left',
x: 10,
},
tickInterval: 7*24*3600*1000
}
I have tried commenting out lines to see if it cancels out the aberration, but so far I have had very little success. If anyone has encountered this before I would be delighted to hear your thoughts!
It looks like you are confusing the x-axis by not supplying proper dates. Try this:
$.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);
});
The d.setHours(0) ensures that each point in the day starts at the same place on the x-axis. d.getTime() puts in a proper time in x rather than a string.
You also need to change the colSize to be one day:
colsize: 24*3600*1000,
and the tick interval to be 1 day:
tickInterval: 24*3600*1000
这篇关于Highcharts Heatmap的未预期结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！