Question

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

这种情况是要绘制的数据的性质，它包含在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
...

这些列是人类可读格式的时间戳，深度和温度。

对于任何给定的一天，测量的深度都会变化，测量的次数也会变化。在同一天，车辆会几次滑到水面，然后又返回潜水。

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

谢谢。

Answer 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一样，要注意参数rowize的使用，在这种情况下非常重要。

从不规则数据绘制Highcharts热图

1 个答案: