如何在x轴上获取高位图日期?


119

是否有一种标准的方法来获取Highcharts在x轴上的日期?在他们的文档中找不到它:http : //www.highcharts.com/ref/#xAxis--type

当我的时间范围足够大时,它将显示日期。但是,当时间范围不够大时,它将仅显示小时,如下所示:

在此处输入图片说明

这不理想...如果在这种情况下可以显示日期和时间,那就太好了。有人知道吗?

Answers:


259

Highcharts将自动尝试为当前缩放范围找到最佳格式。如果xAxis具有type,则完成此操作'datetime'。接下来,将计算当前缩放的单位,它可以是以下之一:

  • 第二
  • 分钟
  • 小时

然后使用该单位查找轴标签的格式。默认模式是:

second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'

如果您希望日期成为“小时”级别标签的一部分,则应更改该dateTimeLabelFormats级别的选项,包括%d%e。这些是可用的模式:

  • %a:工作日很短,例如“星期一”。
  • %A:漫长的工作日,例如“星期一”。
  • %d:每月的两位数字,从01到31。
  • %e:每月的1号到31号。
  • %b:短短的月份,例如“ Jan”。
  • %B:漫长的月份,如“一月”。
  • %m:两位数的月份号,从01到12。
  • %y:两位数年份,例如2009年为09。
  • %Y:四位数年份,例如2009。
  • %H:24小时格式的两位数小时,00到23。
  • %I:12h格式的两位数小时,00到11。
  • %l(小写L):小时,格式为12h,从1到11。
  • %M:分钟,两位数,00到59。
  • %p:大写AM或PM。
  • %P:小写AM或PM。
  • %S:两位数,00到59

http://api.highcharts.com/highcharts#xAxis.dateTimeLabelFormats


16
可能是一个愚蠢的问题,但出于好奇...您在哪里找到了这些日期代码的其余部分?该参考仅显示您包括的默认模式。
buddyp450

20
通过阅读源代码找到,请在此处检查dateFormat方法:Utilities.js
eolsson 2012年

2
除此之外,当前缩放级别的默认模式还包括“毫秒”键。
科里2012年

1
对此非常感谢-文档引用了“ dateFormat”,但尚不清楚他们是否期望您在源代码中还是在文档的其他地方引用该方法。节省了我很多时间:)
2012年

我按照您的示例进行了设置,但是当我经常给它而不是每秒一次数据时,它仍然显示毫秒。你知道为什么吗
Niels Brinch13年

32

从Highcharts API中检出此示例

取代这个

return Highcharts.dateFormat('%a %d %b', this.value);

有了这个

return Highcharts.dateFormat('%a %d %b %H:%M:%S', this.value);

请看这里关于dateFormat()功能。

另请参见-tickIntervalpointInterval


这是一个老问题,但是这个答案很有帮助。特别是您附加的示例链接。
Cyber​​MJ 2014年

该示例链接不再起作用。当我们选择运行时,什么也没有发生。
Simsons

1
@Simsons我在其上使用的Highcharts链接已死,因此我更新了该链接。现在,小提琴似乎正在起作用。
Bhesh Gurung

下面是日期代码列表dateFormat接受:github.com/highcharts/highcharts/issues/...
特雷弗·格曼

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.