如何将x轴日期时间格式更改为时间和日期的混合格式

Question

我一直在尝试使用Highcharts的Heatmap图表复制ADCP图表，但我发现在更改x轴格式时遇到了困难。

ADCP图形示例

如何复制上面示例中所示的x轴？

我还希望当你悬停在图形周围时，弹出的小窗口中的格式是date(dd/mm/yyyy), time(00:00), depth(m), velocity(m/s)。

以下是我的代码链接：https://jsfiddle.net/6hzq3o12/6/

xAxis: {
type: 'datetime',
min: Date.UTC(2017, 0, 1),
max: Date.UTC(2017, 11, 31, 23, 59, 59),
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value:%B}' // long month
},
showLastLabel: false,
tickLength: 16
}

Answer 1

为了达到预期效果，您需要定义自己的xAxis.labels.formatter函数，该函数可以识别第一、中间和最后位置的标签，然后将其值格式设置为DD/MM/YY。否则(对于所有其他标签(返回HH:MM值：

xAxis: {
type: 'datetime',
min: Date.UTC(2017, 0, 1),
max: Date.UTC(2017, 11, 31, 23, 59, 59),
labels: {
formatter: function() {
var timestamp = this.value
var ticks = this.axis.tickPositions
var isMiddle = ticks.length % 2 && ticks.indexOf(this.value) === Math.floor(ticks.length / 2)
var labelFormat
labelFormat = this.isFirst || this.isLast || isMiddle ? '%d/%m/%y' : '%H:%M'
return Highcharts.dateFormat(labelFormat, timestamp)
}
},
tickLength: 16
}

然而，正如@ewolden在你的主帖子下面的评论中所说，为了使它正确工作，你需要为图表提供适当的数据(带小时(。

现场示例：https://jsfiddle.net/25cwrqen/