带时间线的热图

Question

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

这就是我想用 highcharts 实现的目标：http://s4.postimg.org/t5hte4xe5/image.png

在热图中，单元格接收以下数据：[行、列、值]。

所以我尝试了 3 个选项来实现这一点：

1.- 作为数据 [行、日期（作为日期对象）、值] --> Highcharts 错误 #19（我猜它的轴刻度太多，但我有一个刻度间隔）

2.- 作为数据 [行、日期（作为日期对象）、值] 和

xAxis: {
        type: 'datetime',
    },

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

3.- 作为数据 [行、日期（以毫秒为单位）、值] 和

xAxis: {
        type: 'datetime',
    },

--> 仍然没有显示数据，但 XAXIS 看起来不错。

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

这是很多数据，第一行 450 个单元格，第二行 350 个，第三行 50 个，但可能更多。

（在我的例子中，行和列是交换的，所以数据是[列，行，值]，你可以在右下角看到）。

这是我得到的结果，而不是日期（ms 或日期对象），我将整数作为列（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()
    }]
});