Highcharts Heatmap的未预期结果 [英] Unexplected results with Highcharts Heatmap

问题描述

在他们网站上的例子之后，我已经（主要是！）成功地得到了他们的两个例子的混合体，以显示热图

1. http://www.highcharts.com/demo/heatmap


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

唯一的问题是，我似乎已经为图表引入了一个30度的斜线，这样每一天的列错位。我在这里发布了一个例子：

http：// jsfiddle.net/richardarnatt/LMSDX/

  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 
  

http：// jsfiddle.net/8Nptn/

Following the examples on their website, I have (mostly!) succeeded in arriving at a hybrid of their two examples to show a heatmap

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

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

http://jsfiddle.net/8Nptn/

这篇关于Highcharts Heatmap的未预期结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！