时间戳

首页 > 解决方案 > Highcharts - 用 24 小时格式的 2 位数小时格式化 X 轴

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"
    }
  ]
};

我想要达到的目标：

https://snipboard.io/RO4NLw.jpg

标签： javascriptreactjshighcharts

解决方案

您可以同时使用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

推荐阅读