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

您可以同时使用xAxis 的类型datetime和linear类型。在datetime轴集中只有小时：xAxis: {    type: "datetime",    tickInterval: 3600 * 1000,    dateTimeLabelFormats: {        hour: '%k'    }}现场演示： http : //jsfiddle.net/BlackLabel/okeujzmh/API 参考： https : //api.highcharts.com/highcharts/xAxis.dateTimeLabelFormats