Question

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

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

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

所以我尝试了3个选项来实现这个目标：

1.-作为数据[行，日期（作为日期对象），值] - ＆gt; Highcharts错误＃19（我猜它的轴上有太多的刻度，但我有一个tickInterval）

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

xAxis: {
        type: 'datetime',
    },

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

3.-作为数据[行，日期（毫秒），值]和

xAxis: {
        type: 'datetime',
    },

- ＆GT;仍然没有数据显示，但XAXIS看起来没问题。

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

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

（在我的情况下，交换行和列，因此数据为[column，row，value]，如右下角所示）。

这是我得到的，而不是日期（ms或日期对象），我把一个整数作为列（1,2,3 ..）： http://s29.postimg.org/kpya21913/image.png - ＆gt;它的工作原理，但数据并不像我想的那样在时间线上。

如果我设法在它应该去的地方展示热图单元格，我想我可以用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图表上每个rect的宽度是多少。这样的事情：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()
    }]
});

热图与时间线

1 个答案: