如何在 x 轴上获取 highcharts 日期？

Posted 2023-02-16

【中文标题】如何在 x 轴上获取 highcharts 日期？

【英文标题】：How to get highcharts dates in the x axis?

【发布时间】：2011-10-29 09:51:14

【问题描述】：

是否有一种标准方法可以在 Highcharts 的 x 轴上获取日期？在他们的文档中找不到它：https://api.highcharts.com/highcharts/xAxis.type

当我的时间范围足够大时，它会显示日期。但是，当时间范围不够大时，它只会显示小时，如下所示：

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

【参考方案1】：

从 Highcharts API 中检查此 sample。

替换这个

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

有了这个

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

查看here 的dateFormat() 函数。

另见 - tickInterval 和 pointInterval

【讨论】：

这是一个老问题，但这个答案非常有帮助。尤其是您附加的示例链接。

示例链接不再有效。当我们选择运行时，什么都没有发生。

@Simsons 我在上面使用的 Highcharts 链接已经失效，所以我更新了链接。现在，小提琴似乎奏效了。

这是dateFormat 接受的日期代码列表：github.com/highcharts/highcharts/issues/…

【参考方案2】：

Highcharts 会自动尝试为当前缩放范围寻找最佳格式。如果 xAxis 的类型为 '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：两位数年份，如 09 表示 2009 年。 %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

【讨论】：

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

通过阅读源码找到，这里查看dateFormat方法：Utilities.js

只是补充一点，当前缩放级别的默认模式还包括“毫秒”键。

非常感谢这一点 - 文档引用了“dateFormat”，但不清楚他们是否希望您引用源中的方法或文档中的其他地方。节省了我很多时间:)

我按照您的示例进行了设置，但是当我向它提供数据的频率超过每秒一次时，它仍然显示毫秒。你知道为什么吗？

【参考方案3】：

你这样写-：

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

还检查其他日期时间格式

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