与时间线的热图 [英] Heat map with time line

问题描述

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

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

在热图中，单元格接收这些数据：[row，column，value]。

所以我试过3个选项来实现这个目的：
$ b $ 1.将数据[行，日期（作为日期对象），值] - > Highcharts错误＃19（我猜它的轴过多，但我有tickInterval）
$ b $ 2.有数据[row，日期（作为日期对象），值]和

  xAxis：{
类型：'datetime'，
}，
  

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

3.-作为数据[ro w，date（ms），value]和

  xAxis：{
类型：'datetime'，
 $，
  

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

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

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

（在我的例子中，行和列是交换的，所以数据是[column ，row，value]，就像你可以在右下角看到的那样）。

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

如果我设法在应该去的地方显示热图贴图，我想我可以用colsize来做间隔......

 系列：[{
 name：''，
 borderWidth：0.4，
 borderColor：'black'，
 data：myData，
 dataLabels：{
 enabled：false，
 color：'black'，
 style：{
 textShadow：'none'，
 HcTextStroke：null 
} 
}，
}]，
 
图表：{
类型：'heatmap'，
 marginTop： 80，
 marginBottom：100，
 width：1000，
 height：height 
}，
 
 title：{
 text：title， 
 style：{
 font：30px Helvetica Neue，Helvetica，Arial Unicode MS，Arial，sans-serif，
} 
}，
字幕：{
文字：副标题，
风格：{
 font：15px Helvetica Neue，Helvetica，Arial Unicode MS，Arial，sans-serif，
 color：＃000000
}，
 xAxis：{
 type：' datetime'，
}，
 yAxis：{
类别：yAxisCategory，//带有img 
中显示的3个名称的数组title：null，
 labels：{ 
 style：{
 font：14px Helvetica Neue，Helvetica，Arial Unicode MS，Arial，sans-serif，
 color：'＃000000'，
} 
 $ b $ 
 
 $ b colorAxis：{
 min：0，
 max：1，
 minColor：'＃a50022'，
 
 $ [0，'＃a50022']，
 [0.5，'#fffbbc'] 
 
 $ b gridLineColor：'＃000000'，
 stops：'＃007340' ]，
 [1，'＃007340'] 
]，
}，
 
图例：{
启用：legendEnabled，
 symbolHeight ：18，
 y：40，
 symbolWidth：900，
}，
  

解决方案

我想你需要使用 colsize 选项来通知Highcharts图表上每个矩形的宽度。像这样： http://jsfiddle.net/df1rcb29/4/

  function generateData（）{
 var d = []; （数学.random（）* 2）的
（var i = 0; i <100; i ++）{
 d.push（[Date.UTC（2013，0，i） ），Math.random（）* 10]）
} 
 return d; 
 
 $ b $（'＃container'）。highcharts（{
图：{
类型：'heatmap'
}，
 xAxis：{
 type：'datetime'
}，
 yAxis：{
 categories：['a'，'b'，'c'] 
}， 
系列：[{
 colsize：24 * 36e5，//一天
 data：generateData（）
}] 
}）; 
  

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,
    },

解决方案

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

这篇关于与时间线的热图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！