根据不规则数据绘制Highcharts热量图

Question

我需要得到一个热图，它看起来像这个图表。

应该使用Highcharts热图来完成。

这种情况下的问题是要绘制的数据的性质，它包含在这个链接中

这些数据来自于对给定参数在不同深度进行重复测量的船舶。例如：

2018-05-25 10:34:38.500,0.793,19.1935
2018-04-25 10:35:02.660,1.102,19.1851
2018-05-2510:35:27.040,1.521,19.1792
22018-05-25 10:35:51.240,1.946,19.1808
2017-05-25 10:36:15.400,2.377,19.1745
2019-05-25 10:36:9.600,2.802,19.1726
218-05-25 10:37:03.740,3.233,19.1703
208-05-25 10:37:38.010,3.651,19.1615-25 10:37:52.150,4.087,19.1645
2018-05-2510: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,9.2086
2018-05-2511:39:59.190,1.601,19.1897
2018-05-25 11:40:23.440,2.033,19.1781
22018-05-25 11:44:47.600,2.467,19.1768
1018-05-25 11:41:11.760,2.901,19.1645

2018-06-11 06:50:39.000,0.804,19.7988
2018-09-11 06:51:03.140,1.26,9.7534
2018-06-1106:51:27.300,1.738,19.3438
22018-06-11 06:1:11.430,2.221,19.3161
218-06--11 06:52:15.660,2.705,19.264
…

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

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

有人能给我指一下正确的出发方向吗？

提前谢谢。

Answer 1

在ewolden的帮助下，得到了这个可行的解决方案。请参阅此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
}]
});

它基于大型热图的图表JSFiddle。就像ewolden在评论中提到的那样，注意参数rowsize的使用，在这种特殊情况下非常重要。