HighCharts在x轴上显示日期时间格式

Question

我试图在 Highcharts 的 X 轴上以日/周/月的形式显示日期时间。我的数据已经按照 UTC 日期时间格式化为 X 值，而 Y 值则表示数据量级。我原本认为只需要这样做就可以实现。

Highcharts.chart('container', {
  title: {
    text: 'Chart with time'
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: {
      day: "%e. %b",
      month: "%b '%y",
      year: "%Y"
    }
  },
  series: [{
    data: [
      [1493326164493, 100],
      [1493326194018, 120]
    ]
  }]
});

我做错了什么？我在下面发布了一个 fiddle 链接，以说明我的情况。

https://jsfiddle.net/dLfv2sbd/

- lboyel

Answer 1

axis.dateTimeLabelFormats 的工作方式略有不同。首先，Highcharts 会尝试猜测您的数据的“最佳单位”，例如，如果是以天为单位，则将根据 dateTimeLabelFormats 中的 day 属性进行格式化。

如果您只想格式化坐标轴标签，则可以使用 axis.labels.format 并指定如下格式：

xAxis: {
  type: 'datetime',
  labels: {
    format: '{value:%Y-%b-%e}'
  },

示例：https://jsfiddle.net/dLfv2sbd/1/

- morganfree

Answer 2

你可以尝试使用以下方式格式化日期：

 xAxis: {
   labels: {
    formatter: function(){

      return moment(new Date(this.value)).format('DD'); // example for moment.js date library

      //return this.value;
    },
},

您可以查看文档http://api.highcharts.com/highcharts/xAxis.labels.formatter。

此外，还可以检查文档。

- Leguest

---

但这样做只会格式化标签而不是X轴的值本身。 - lboyel

为什么在将数据放入Highchart之前无法格式化数据？ - Leguest

Answer 3

你也可以尝试这个方法 -

1. {value:%Y-%b-%e %l:%M %p }

提示：这是显示日期和时间的代码。

labels: {
      format: '{value:%Y-%b-%e %l:%M %p }'
},

输出- 2017年4月27日下午8:49

2. 格式：'{value:%Y-%b-%e %l:%M}'

labels: {
          format: '{value:%Y-%b-%e %l:%M %p }'
},

输出结果- 2017年4月27日8:49

3. 格式：'{value:%Y-%b-%e}'

 labels: {
              format: '{value:%Y-%b-%e}'
 },

输出 - 2017年4月27日

4. 格式: '{value:%Y-%b-%e %H:%M}'

labels: {
      format: '{value:%Y-%b-%e %H:%M}'
},

<最初的回答> 输出 2017年4月27日20:49

- Samir

Answer 4

简单的年月日格式：

 format: '{value:%Y-%m-%e}'

- Alessandro Mattiuzzi