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

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

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

我还希望格式为

date（dd/mm/yyyy）、time（00:00）、depth（m）、velocity（m/s）

，当您在图形上悬停时，会出现一个小弹出窗口

以下是我的代码链接：

---

为了达到预期效果，您需要定义自己的

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在你的主要帖子下面的评论中所说的那样

---

活生生的例子：

你所问的对你的输入数据没有多大意义。您有一年的数据，但希望显示一天中的小时，如示例ADCP图所示。工具提示很容易修复，因为这很有意义。看：谢谢你的回复，埃沃登。我已添加到csv部分，但无法使其正常工作。谢谢你的回复，丹尼尔。我已设法将时间数据输入到项目中。现在我面临一个新的问题，因为有一个额外的变量，即时间，所以图形没有显示出来。我很确定我提供的数据是错误的。这是因为时间数据应该是日期的一部分，而不是其他列。你需要这样设置每一行：

Date，Depth，Velocity“10/04/2014 10:16:36”，1,0.7675003283“10/04/2014 10:26:36”，2,0.9115423085

Live示例：好的，我更改了日期，发现图表上的数据与x轴不在一起。数据仍然是按日期而不是日期和时间进行的。是的，它们是这样的（通过缩放可以看到），但是图表需要显示大范围的时间，所以现在X轴刻度间隔是一天，这就是为什么我们可以看到

00:00

值。您需要更精确地指定xAxis标签的行为方式，然后我将帮助您实现它。xAxis应该类似于“10/04/14、04:00、08:00、12:00、16:00、20:00、11/04/14、04:00、08:00…”，其中数据以分钟为单位绘制，如上面的ADCP图形示例所示。谢谢你，我很抱歉给你添麻烦。

       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
        }