Question

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

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

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

1 个答案: