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

Question

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

Example of an ADCP Graph

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

我还希望小弹出窗口中的格式为日期(dd/mm/yyyy)、时间(00:00)、深度(m)、速度(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/月/年。否则(对于所有其他标签)返回 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/