Heat map with time line

问题

I Am trying to do a heat map with a time line in the xAxis, and be able to display a cell in one interval, from one date, to another.

This is what I would like to achieve with highcharts: http://s4.postimg.org/t5hte4xe5/image.png

In a heat map the cells receive this data: [row, column, value].

So I have tried 3 options to achieve this:

1.- Have as data [row, date (as a date object), value] --> Highcharts error #19 (I guess its too many ticks to an axis, but I have got a tickInterval)

2.- Have as data [row, date (as a date object), value] and

xAxis: {
        type: 'datetime',
    },

this is what I get: http://s4.postimg.org/h6ta3jaq5/image.png

3.- Have as data [row, date (in ms), value] and

xAxis: {
        type: 'datetime',
    },

--> STILL NO DATA SHOWN, BUT XAXIS LOOKS OK.

This is what I am getting with 3: http://s30.postimg.org/736gie56p/image.png

It is a lot of data, 450 cells for the first row, 350 for the second and 50 for the third for this example, but it could be more.

(In my case, row and column are exchanged, so the data is [column, row, value], as you can see in the right down corner).

This what I get when instead of a date (ms or date object), I put an integer as the column (1,2,3..): http://s29.postimg.org/kpya21913/image.png --> It works, but the data its not in the time line as I would like to.

If I manage to show the heat map cell in the place it should go, I guess I could do the interval with 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,
    },

回答1:

I think you need to work with colsize option to inform Highcharts what is the width of each rect on a chart. Something like this: 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()
    }]
});

来源：https://stackoverflow.com/questions/25623314/heat-map-with-time-line

标签

Highcharts