如何在x轴中显示highcharts日期？

Question

有没有一种标准的方法可以在Highcharts上获得x轴上的日期？ 我在他们的文档中找不到相关信息：https://api.highcharts.com/highcharts/xAxis.type 当我的时间范围足够大时，它会显示日期。 但是，当时间范围不够大时，它只会显示小时，如下图所示： 这不是很理想... 如果此情况下能够显示日期和时间，那就太好了。 有人知道怎么做吗？

- Jeff

Answer 1

如果x轴的类型是 'datetime'，Highcharts将自动尝试找到当前缩放范围的最佳格式。然后计算当前缩放的单位，可以是以下之一：

• 秒
• 分钟
• 小时
• 天
• 周
• 月
• 年

然后使用此单位查找轴标签的格式。默认格式如下：

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：短平日，如'Mon'。
• %A：长平日，如'Monday'。
• %d：月份中的两位数日期，从01到31。
• %e：月份中的日期，1到31。
• %b：短月份，如'Jan'。
• %B：长月份，如'January'。
• %m：两位数月份数字，从01到12。
• %y：两位数年份，如2009年的09年。
• %Y：四位数年份，如2009。
• %H：24小时制下的两位数小时，从00到23。
• %I：12小时制下的两位数小时，从00到11。
• %l（小写L）：12小时制下的小时，从1到11。
• %M：两位数分钟，从00到59。
• %p：大写AM或PM。
• %P：小写AM或PM。
• %S：两位数秒数，从00到59

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

- eolsson

---

也许这是个愚蠢的问题，但出于好奇，您是从哪里找到这些日期代码的？参考资料中只显示了您包含的默认模式。 - buddyp450

在阅读源代码时发现，这里有一个dateFormat方法：Utilities.js。请进行翻译。 - eolsson

仅供参考，当前缩放级别的默认模式也包括“毫秒”键。 - Cory

非常感谢您的帮助 - 文档中提到了“dateFormat”，但不清楚他们是否希望您在源代码中引用该方法还是在文档的其他位置引用。这节省了我很多时间 :) - Jon

我按照您的示例进行了设置，但当我提供频率大于每秒一次的数据时，它仍然显示毫秒。您有任何想法吗？ - Niels Brinch

Answer 2

请查看来自Highcharts API的示例.

替换这个

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

使用此功能

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

查看这里关于dateFormat()函数的内容。

同时还请参见 - tickInterval和pointInterval

- Bhesh Gurung

---

这是一个老问题，但是这个答案非常有帮助。特别是你附加的示例链接。 - CyberMJ

示例链接已失效。当我们选择运行时，什么也不会发生。 - Simsons

@Simsons，我在其中使用的Highcharts链接已经失效，所以我更新了链接。现在，这个fiddle似乎可以工作了。 - Bhesh Gurung

这是dateFormat接受的日期代码列表：https://github.com/highcharts/highcharts/issues/6737#issuecomment-303073344 - Trevor Gehman

Answer 3

你可以这样写：

xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
           day: '%d %b %Y'    //ex- 01 Jan 2016
        }
}

还要检查其他的日期时间格式。

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

- Ronniemittal