Highcharts - 以 24 小时格式使用 2 位数小时格式化 X 轴

Question

我希望以一种定制的方式格式化 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"
    }
  ]
};

我想要达到的目标：

https://snipboard.io/RO4NLw.jpg

Answer 1

您可以同时使用datetime时间和linear类型的 xAxis。 在datetime时间轴中仅设置小时：

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

---

现场演示： http://jsfiddle.net/BlackLabel/okeujzmh/

API 参考： https://api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats