javascript - 使用预定义的 X 轴绘制不规则日期时间数据

Question

我有时间序列数据，其中时间分量以不规则的间隔出现。目前，当我绘制此数据时，x 轴标签显示与我发送到图表的点相匹配的不规则时间。

我希望 x 轴标签以固定的时间间隔(例如每小时)出现，并将点绘制在适当的位置。例如，时间值为 1:30 AM 的点将显示在 1:30 AM x 轴标签的中间位置。

我有一个代码笔(见下文)，我一直在对其进行更改，以尝试获得所需的输出，但到目前为止我还没有运气。

https://codepen.io/mprothme/pen/xvqZyQ

实际示例代码如下:

Highcharts.chart('container', {
  chart: {
    type: 'spline'
  },
  title: {
    text: 'Test Time Points'
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { 
      millisecond: '%H:%M:%S.%L',
      second: '%H:%M:%S',
      minute: '%H:%M',
      hour: '%H:%M',
      day: '%e. %b',
      week: '%e. %b',
      month: '%b \'%y',
      year: '%Y'
    },
    title: {
      text: 'Date'
    }
  },
  yAxis: {
    title: {
      text: ''
    },
    min: 0
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: '{point.x:%H:%M}: {point.y:.2f} '
  },

  plotOptions: {
    spline: {
      marker: {
        enabled: true
      }
    }
  },

  colors: ['#6CF'],

  series: [{
    name: "Time Series 1",
    data: [
      [Date.UTC(2019, 10,  9, 10,5), 1],
      [Date.UTC(2019, 10,  9, 10,11), 1.1],
      [Date.UTC(2019, 10,  9, 10,15), 1.3],
      [Date.UTC(2019, 10,  9, 10,23), 1.5],
      [Date.UTC(2019, 10,  9, 10,25), 1.2]

    ]
  }]
});

Answer 1

可以使用xAxis.tickInterval = 60 * 60 * 1000(一小时，以毫秒为单位)来完成。

代码:

  xAxis: {
    type: 'datetime',
    title: {
      text: 'Date'
    },
    startOnTick: true,
    endOnTick: true,
    tickInterval: 60 * 60 * 1000
  }

演示:

• https://jsfiddle.net/BlackLabel/s21hjgtd/

API引用:

• https://api.highcharts.com/highcharts/xAxis.tickInterval