帶時間線的熱圖

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() 
    }] 
});