带时间线的热图

Question

我正在尝试在xAxis中使用时间线做热图，并且能够在一个时间间隔内从一个日期到另一个时间显示一个单元格。

这是我想什么来实现与highcharts：http://s4.postimg.org/t5hte4xe5/image.png

在热图的单元接收该数据：[行，列值]。

所以我试图三个选项来实现这一目标：

1.-有数据[行，日期（如日期对象），值] - > Highcharts错误＃19（我猜测它的太多蜱的轴，但我有一个tickInterval）

2：有无数据[行，日期（如日期对象），价值]和

xAxis: { 
     type: 'datetime', 
    }, 

这就是我得到：http://s4.postimg.org/h6ta3jaq5/image.png

3.-具有如数据[行，日期（以毫秒计），值]和

xAxis: { 
     type: 'datetime', 
    }, 

- > STILL NO DATA示出，但XAXIS看起来不错。

这是我得到以3： http://s30.postimg.org/736gie56p/image.png

这是一个很大的数据，450个单元第一行，350第二次和50第三在这个例子中，但它可能是更多。

（在我的情况下，行和列交换，所以数据是[列，行，值]，如右下角所示）。

这是我得到的时候，而不是日期（毫秒或日期对象），我把整数作为列（1,2,3 ..）： http://s29.postimg.org/kpya21913/image.png - >它的工作，但它的数据在我想要的时间线上。

如果我管理，以显示它应该去的地方热图单元格，我想我可以做colsize区间...

series: [{ 
     name: '', 
     borderWidth: 0.4, 
     borderColor: 'black', 
     data: myData, 
     dataLabels: { 
      enabled: false, 
      color: 'black', 
      style: { 
       textShadow: 'none', 
       HcTextStroke: null 
      } 
     }, 
    }], 

    chart: { 
     type: 'heatmap', 
     marginTop: 80, 
     marginBottom: 100, 
     width: 1000, 
     height: height 
    }, 

    title: { 
     text: title, 
     style: { 
      font: "30px Helvetica Neue, Helvetica, Arial Unicode MS, Arial, sans-serif", 
     } 
    }, 
    subtitle: { 
     text: subtitle, 
     style: { 
     font: "15px Helvetica Neue, Helvetica, Arial Unicode MS, Arial, sans-serif", 
     color: "#000000" 
     }, 
    xAxis: { 
     type: 'datetime', 
    }, 
    yAxis: { 
     categories: yAxisCategory, //Array with the 3 names shown in the img 
     title: null, 
     labels: { 
      style: { 
      font: "14px Helvetica Neue, Helvetica, Arial Unicode MS, Arial, sans-serif", 
      color: '#000000', 
      } 
     }, 

    }, 
    colorAxis: { 
     min: 0, 
     max: 1, 
     minColor: '#a50022', 
     maxColor: '#007340', 
     gridLineColor: '#000000', 
     stops: [ 
      [0, '#a50022'], 
      [0.5, '#fffbbc'], 
      [1, '#007340'] 
     ], 
    }, 

    legend: { 
     enabled: legendEnabled, 
     symbolHeight: 18, 
     y: 40, 
     symbolWidth:900, 
    }, 

Answer 1

我认为你需要colsize选项工作通知Highcharts图表上每个矩形的宽度是多少？事情是这样的：http://jsfiddle.net/df1rcb29/4/

function generateData() { 
    var d = []; 
    for (var i = 0; i < 100; i++) { 
     d.push([Date.UTC(2013, 0, i), Math.round(Math.random() * 2), Math.random() * 10]) 
    } 
    return d; 
} 

$('#container').highcharts({ 
    chart: { 
     type: 'heatmap' 
    }, 
    xAxis: { 
     type: 'datetime' 
    }, 
    yAxis: { 
     categories: ['a', 'b', 'c'] 
    }, 
    series: [{ 
     colsize: 24 * 36e5, // one day 
     data: generateData() 
    }] 
});