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

【问题标题】：How do I change the x-axis datetime format to a mixture of time and date?如何将 x 轴日期时间格式更改为时间和日期的混合格式？
【发布时间】：2018-07-24 08:54:43
【问题描述】：

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

Example of an ADCP Graph

如上例所示，如何复制 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
}

【问题讨论】：

您的要求对您的输入数据没有多大意义。您有一年的数据，但您想像示例 ADCP 图表那样显示一天中的小时。工具提示很容易修复，因为这是有道理的。见：jsfiddle.net/ewolden/6hzq3o12/10
感谢您的回复，ewolden。我已添加到 csv 部分，但未能使其正常工作。 jsfiddle.net/25cwrqen/30

标签： javascript html datetime highcharts heatmap

【解决方案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/

【讨论】：

感谢您的回复，丹尼尔。我已经设法将时间数据放入项目中。现在我面临一个新问题，由于有一个额外的变量，即时间，所以图表没有显示出来。我很确定我错误地提供了数据。 jsfiddle.net/25cwrqen/26
这是因为时间数据应该是日期的一部分，而不是其他列。您需要像这样设置每一行：Date,Depth,Velocity "10/04/2014 10:16:36",1,0.7675003283 "10/04/2014 10:26:36",2,0.9115423085 现场示例：jsfiddle.net/q4teysd9
好吧，我更改了日期，发现图表上的数据与 x 轴不相符。数据仍然按日期而不是日期和时间。 jsfiddle.net/q4teysd9/12
是的（通过缩放可以看到），但是图表需要显示大范围的时间，所以 xAxis 刻度间隔现在是一天，这就是为什么我们可以看到 @ 987654330@ 值。您需要更准确地指定 xAxis 标签的行为方式，然后我将帮助您实现它。
xAxis 应该类似于“10/04/14, 04:00, 08:00, 12:00, 16:00, 20:00, 11/04/14, 04:00, 08:00..”，其中数据以分钟为单位绘制，如上面的 ADCP 图表示例所示。谢谢你，很抱歉给你带来了麻烦。