每月 8:00 到 17:00 的天数的高图热图

Question

我正在尝试在 6/21 和 7/21(在 x 轴上(和 8：00 到 17：00 在 y 轴上创建一个热图。

我尝试了下面的代码，但我似乎不知道如何从 8：00 到 17：00 削减时间。此外，X 轴标签显示在月份名称中，我想改为查看日期，例如"6/21">

我的数据将如下所示：

6/21, 08:00, 300
6/21, 09:00, 210
6/21, 10:00, 150
6/21, 11:00, 100
6/21, 12:00, 200
6/21, 13:00, 350
6/21, 14:00, 390
6/21, 15:00, 110
6/21, 16:00, 350
6/21, 17:00, 300
6/22, 08:00, 210
6/22, 09:00, 210
6/22, 10:00, 250
6/22, 11:00, 100
6/22, 12:00, 200
6/22, 13:00, 350
6/22, 14:00, 190
6/22, 15:00, 310
6/22, 16:00, 150

依此类推(直到 7 月 21 日(，日期应在 X 轴上，时间应在 y 轴上

Highcharts.chart('container', {
data: {
csv: document.getElementById('csv').innerHTML
},
chart: {
type: 'heatmap',
margin: [60, 10, 80, 50]
},
boost: {
useGPUTranslations: true
},
title: {
text: 'Highcharts heat map',
align: 'left',
x: 40
},
subtitle: {
text: 'Temperature variation by day and hour through 2017',
align: 'left',
x: 40
},
xAxis: {
type: 'datetime',
min: Date.UTC(2017, 5, 21),
max: Date.UTC(2017, 6, 20 ),
//xAxis.max : Date.UTC(2017, 6, 7 ), 
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
min: Time.
title: {
text: null
},
labels: {
format: '{value}:00'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 6, 12, 18, 24],
tickWidth: 1,
min: 0,
max: 23,
reversed: true
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a'],
[1, '#c4463a']
],
min: -15,
max: 25,
startOnTick: false,
endOnTick: false,
labels: {
format: '{value}℃'
}
},
series: [{
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EFEFEF',
colsize: 24 * 36e5, // one day
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
}]
});

Answer 1

在分析了您想要显示数据的方式之后，我认为最好保留分类轴。您可以在下面找到如何为此解决方案转换数据的示例：

data: {
csv: document.getElementById('csv').innerHTML,
parseDate: function(el) {
var splitted = el.split('-');
if (splitted.length === 2) {
return splitted[0] == '6' ? Number(splitted[1]) - 21 : Number(splitted[1]) + 10;
}
return true
},
parsed: function(data) {
var splitted;
Highcharts.each(data[1], function(el, i) {
if (i > 0) {
data[1][i] = parseInt(el) - 8;
}
});
}
}

现场演示：http://jsfiddle.net/BlackLabel/srzp6f8y/

API 参考：https://api.highcharts.com/highcharts/data

Answer 2

正如@ppotaczek用他的小提琴所展示的那样，最好在所有日期时间轴上使用日期时间。但要做到这一点，我们需要有一种将"18：00"更改为以毫秒为单位的日期时间的方法。我们可以使用beforeParse函数格式化整个传入的 csv。

可以这样完成：

beforeParse: function(e) {
let csv = e.split('n'); //split by newline
let processedTable = []
for (let i = 0; i < csv.length; i++) {
let row = csv[i].split(', '); 
if (row.length != 3) //skip empty rows or rows with more/less columns
continue;
processedTable.push(
(new Date(2018, row[0].split('/')[0] - 1, row[0].split('/')[1], 0, 0, 0)).getTime() + ', ' + //get the timestamp for the date (assuming 2018)
(new Date(1970, 0, 1, row[1].split(':')[0], 0, 0)).getTime() + ', ' + //use 1970 as the date for the time axis, since we are not interested in the date, but only the hours
row[2]
)
}
return processedTable.join('n') //join the array into a string again
},

除此之外，我还删除了许多设置的配置选项。尤其是 yAxis。但要点是

yAxis: {
type: 'datetime',
...
}, 
colorAxis: {
min: 0,
max: 400,
...
},
series: {
colsize: 24 * 36e5, // one day
rowsize: 36e5, //one hour
...
}

Highcharts.chart('container', {
data: {
csv: document.getElementById('csv').innerHTML,
firstRowAsNames: false,
beforeParse: function(e) {
let csv = e.split('n');
let processedTable = []
for (let i = 0; i < csv.length; i++) {
let row = csv[i].split(', ');
if (row.length != 3)
continue;
processedTable.push(
(new Date(2018, row[0].split('/')[0] - 1, row[0].split('/')[1], 0, 0, 0)).getTime() + ', ' +
(new Date(1970, 0, 1, row[1].split(':')[0], 0, 0)).getTime() + ', ' +
row[2]
)
}
return processedTable.join('n')
},
},
chart: {
type: 'heatmap',
margin: [60, 10, 80, 50]
},
boost: {
useGPUTranslations: true
},
title: {
text: 'Highcharts heat map',
align: 'left',
x: 40
},
subtitle: {
text: 'Temperature variation by day and hour through 2017',
align: 'left',
x: 40
},
xAxis: {
type: 'datetime',
//xAxis.max : Date.UTC(2017, 6, 7 ), 
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
type: 'datetime',
title: {
text: null
},
labels: {
//format: '{value}:00'
},
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a'],
[1, '#c4463a']
],
min: 0,
max: 400,
startOnTick: false,
endOnTick: false,
labels: {
format: '{value}℃'
}
},
series: [{
borderWidth: 0,
nullColor: '#EFEFEF',
colsize: 24 * 36e5, // one day
rowsize: 3600*1000,
tooltip: {
headerFormat: 'Temperature<br/>',
pointFormat: '{point.x:%e %b, %Y} {point.y: %H:%M} <b>{point.value} ℃</b>'
},
}]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>
<pre id='csv' style="visibility: hidden;">6/21, 08:00, 300
6/21, 09:00, 210
6/21, 10:00, 150
6/21, 11:00, 100
6/21, 12:00, 200
6/21, 13:00, 350
6/21, 14:00, 390
6/21, 15:00, 110
6/21, 16:00, 350
6/21, 17:00, 300
6/22, 08:00, 210
6/22, 09:00, 210
6/22, 10:00, 250
6/22, 11:00, 100
6/22, 12:00, 200
6/22, 13:00, 350
6/22, 14:00, 190
6/22, 15:00, 310
6/22, 16:00, 150
</pre>

工作示例：https://jsfiddle.net/ewolden/9ejLwfut/