根据不规则数据绘制 Highcharts 热图答案

【问题标题】：Plotting a Highcharts Heat map from irregular data根据不规则数据绘制 Highcharts 热图
【发布时间】：2018-12-23 22:17:48
【问题描述】：

我需要一个看起来像this chart 的热图。

应该使用Highcharts Heat Map来完成。

这种情况的问题是要绘制的数据的性质，它包含在this link中

这些数据来自海上车辆，可以说，这些车辆在不同深度对给定参数执行重复测量。例如，我们可以：

2018-05-25 10:34:38.500,0.793,19.1935
2018-05-25 10:35:02.660,1.102,19.1851
2018-05-25 10:35:27.040,1.521,19.1792
2018-05-25 10:35:51.240,1.946,19.1808
2018-05-25 10:36:15.400,2.377,19.1745
2018-05-25 10:36:39.600,2.802,19.1726
2018-05-25 10:37:03.740,3.233,19.1703
2018-05-25 10:37:28.010,3.651,19.1615
2018-05-25 10:37:52.150,4.087,19.1645
2018-05-25 10:38:16.310,4.516,19.0939
2018-05-25 10:38:40.520,4.954,19.0345
2018-05-25 11:39:10.810,0.773,19.2568
2018-05-25 11:39:35.030,1.187,19.2086
2018-05-25 11:39:59.190,1.601,19.1897
2018-05-25 11:40:23.440,2.033,19.1781
2018-05-25 11:40:47.600,2.467,19.1768
2018-05-25 11:41:11.760,2.901,19.1645

...
2018-06-11 06:50:39.000,0.804,19.7988
2018-06-11 06:51:03.140,1.26,19.7534
2018-06-11 06:51:27.300,1.738,19.3438
2018-06-11 06:51:51.430,2.221,19.3161
2018-06-11 06:52:15.660,2.705,19.264
...

其中的列是人类可读格式的时间戳、深度和温度。

对于任何一天，测量的深度和测量次数都会有所不同。在同一天，这艘船几次浮出水面，然后再次返回潜水。

有人能给我指出正确的开始方向吗？

提前致谢。

【问题讨论】：

您列出了有关您的数据的一些要求和详细信息，但没有列出任何问题或疑问。 “非常感谢您的帮助”-您的意思是“有人可以为我做这件事吗？”。如果你炫耀你的尝试，以及你遇到的困难，你通常会很快得到帮助。
正确的开始方向；将所有时间戳转换为自 1970 年以来的毫秒数，例如new Date('2018-05-25 10:34:38.500').getTime()。如果它们未排序，请在之前或之后对其进行排序。将它们放在这个结构中：[{x: new Date('2018-05-25 10:34:38.500').getTime(), y: 0.793}, {x: new Date('2018-05-25 10:35:02.660').getTime(), y: 1.102}, ...] 并将其用作系列 1 的数据，然后对系列 2 的数据执行此操作：[{x: new Date('2018-05-25 10:34:38.500').getTime(), y: 19.1935}, {x: new Date('2018-05-25 10:35:02.660').getTime(), y: 19.1851}, ...]。然后使用 2 轴和绘图。
首先，感谢您的帮助ewolden。在您发表第一条评论后，我尝试为大型热图修改 higcharts jsfiddle 并得到这个working heatmap。但它包含微小的白色区域，这不会发生在使用 maplotlib 和 python 的图表的server version 中，来自相同的数据。
没问题，看起来你的工作正常。我对 hgihchart 中的热图没有太多经验，也就是说，我发现了这个：rowsize，我认为它可能适合您的需求，例如 rowsize 3：jsfiddle.net/ewolden/fvgm3dca/26。我认为这与 matplotlib 会做的一样，只是加宽行直到没有间隙。哦，我删除了一堆行，太慢了，在尝试东西时处理这么多数据。
好人，rowsize 参数成功了。我不习惯使用 stackoverflow 来提问，我会记住您对未来关于我们寻求帮助方式的建议。非常感谢你。

标签： highcharts heatmap

【解决方案1】：

在ewolden 的帮助下，得到了这个可行的解决方案。见this JSFiddle。

Highcharts.chart('container', {

data: {
    csv: document.getElementById('csv').innerHTML
},

chart: {
    type: 'heatmap',
    width: 640,
    height:480
    /*margin: [60, 50, 80, 100]*/
},

boost: {
    useGPUTranslations: true
},

title: {
    text: 'Highcharts heat map',
    align: 'left',
    x: 40
},

subtitle: {
    text: 'Temperature variation by day and depth May - June 2018',
    align: 'left',
    x: 40
},

xAxis: {
    type: 'datetime',
    min: 1527244478500,
    max: 1528799894080,
    /*min: Date.UTC(2018, 05, 25),
    max: Date.UTC(2018, 16, 12 23, 59, 59),*/
    dateTimeLabelFormats: {
      day: "%e. %b",
      month: "%b '%y",
      year: "%Y"
    },
    /*labels: {
        align: 'left',
        x: 5,
        y: 14,
        format: '{value:%B}' // long month
    },*/
    showLastLabel: true,        
    tickLength: 16
},

yAxis: {
    title: {
        text: null
    },
    labels: {
        format: '{value}m'
    },
    minPadding: 0,
    maxPadding: 0,
    startOnTick: false,
    endOnTick: false,
    tickPositions: [200, 400,600,800],
    tickWidth: 1,
    min: 5,
    max: 960,
    reversed: true
},

colorAxis: {
    stops: [
        /*[0, '#3060cf'],
        [0.5, '#fffbbc'],
        [0.9, '#c4463a'],
        [1, '#c4463a']*/
         [0, '#3060cf'],
            [0.5, '#fffbbc'],
            [0.9, '#c4463a']
    ],
    min: 7,
    max: 20,
    startOnTick: false,
    endOnTick: false,
    labels: {
        format: '{value}℃'
    },
     /*tickInterval: 2.5*/
},

series: [{
    boostThreshold: 100,
    borderWidth: 0,
    nullColor: '#EFEFEF',
    colsize: 24*36e5, // one day
    rowsize:3,
    tooltip: {
        headerFormat: 'Temperature<br/>',
        pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ℃</b>'
    },
    turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}]
});

它基于higcharts JSFiddle for large heatmaps。就像他评论中提到的 ewolden 一样，注意参数 rowsize 的使用，在这种特殊情况下非常重要。

【讨论】：