我正在尝试使用highcharts创建热图。
正如您所看到的那样,在x轴上,3月份之后会有一个空白部分。如何删除它以使10月到3月的范围完全适合x轴。
其次,我如何改进配色方案或使其显得更好。
以上热图的代码
Highcharts.chart('container', {
data: {
csv: document.getElementById('csv').innerHTML
},
chart: {
type: 'heatmap',
margin: [60, 10, 80, 50]
},
boost: {
useGPUTranslations: true
},
title: {
text: 'Traffic',
align: 'center',
x: 40
},
subtitle: {
text: 'Source: yyy',
align: 'center',
x: 40
},
xAxis: {
type: 'datetime',
min: Date.UTC(2016, 9, 1),
max: Date.UTC(2017, 4, 0),
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
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.1, '#66aee2'],
[0.2, '#8ec5ed'],
[0.3, '#4ee8b4'],
[0.4, '#7ee567'],
[0.5, '#fffbbc'],
[0.6, '#f2c05e'],
[0.7, '#ed9549'],
[0.8, '#ed7031'],
[0.9, '#ed4d21'],
[1, '#c4463a']
],
min: 1000,
max: 150000,
startOnTick: true,
endOnTick: true,
labels: {
format: '{value}'
}
},
series: [{
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EFEFEF',
colsize: 24 * 36e5, // one day
tooltip: {
headerFormat: 'Hits<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
}]
});