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

Question

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

Example of an ADCP Graph

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

我还希望当您将鼠标悬停在图表上时出现的小弹出窗口中的格式为 date(dd/mm/yyyy), time(00:00), depth(m), velocity(m/s)。

这是我的代码的 link： 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。否则（对于所有其他标签）return 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 在您的主要 post.

下面的评论中所说的那样

实例：https://jsfiddle.net/25cwrqen/

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

How do I change the x-axis datetime format to a mixture of time and date?

html

javascript

datetime

heatmap

highcharts