Javascript Highcharts-在24小时格式中使用2位数小时设置X轴格式

我正在寻找格式的X轴在一种定制的方式，见附图。格式应该是实时的，在24小时内，但显示在图像-9，10，11，12等

Y轴的值是可变的，这使得事情变得棘手。例如，它们可以是字母、数字或其他与时间没有任何关系的类别。我最好使用datetime还是只使用整数

到目前为止，它看起来是这样的，但没有按预期工作：

const chartOptions = {
  title: {
    text: ""
  },
  xAxis: {
    type: "datetime",
    tickInterval: 3600 * 1000,
      dateTimeLabelFormats: {
        day: '%H'
     }
  },
  yAxis: {},
  series: [
    {
      data: [
        [Date.UTC(2012, 10, 10, 0, 5, 0), 1.09],
        [Date.UTC(2012, 10, 10, 0, 10, 0), 1.09]
      ],
      type: "line"
    }
  ]
};

我想要达到的目标：

您可以同时使用datetime和线性类型的xAxis。要在日期时间轴中仅设置小时，请执行以下操作：

xAxis: {
    type: "datetime",
    tickInterval: 3600 * 1000,
    dateTimeLabelFormats: {
        hour: '%k'
    }
}

现场演示：

API参考：