Question

我正在使用highcharts，无法确定日期输入应该是从rails日期到日期的highcharts接受格式。

在我的迁移文件中，我存储的日期如下：

t.date :consumption_date

该值以“2012-03-25”格式存储，然后转到终端找到记录，我得到了这个：

=>  Sat, 31 Mar 2012

当图表呈现时，各个点显示无效日期。以下数组输出到highcharts以呈现

[[Sun, 25 Mar 2012, 1158], [Sat, 31 Mar 2012, 1200]]

当jquery中提交数据时，highcharts在其中一个演示图表中使用的格式为：

[[Date.UTC(1970,  9, 27), 0   ], [Date.UTC(1970, 10, 10), 0.6 ]]

如何通过向highcharts提交正确的日期格式来消除无效日期。

Answer 1

内部Highcharts使用javascript日期编号（1970年1月1日以来的毫秒数）来表示日期。请参阅Mozilla reference。

要在轴上获取日期，首先需要将轴类型设置为“datetime”：

xAxis: {
    type: 'datetime'
}

指定系列数据时有几个选项（所有三个示例都生成相同的图表）：

设置起点并使用点之间的固定间隔

pointStart: Date.UTC(2012, 2, 6, 10),
pointInterval: 1000 * 60 * 60,
data: [5, 6, 4]

使用Date.UTC方法指定确切日期。这种方式对人类可读：

data: [
    [Date.UTC(2012, 2, 6, 10), 5], 
    [Date.UTC(2012, 2, 6, 11), 6], 
    [Date.UTC(2012, 2, 6, 12), 4]]

或直接指定纪元时间：

[[1331028000000, 5], [1331031600000, 6], [1331035200000, 4]]

jsfiddle

Answer 2

添加到@eolsson，纪元时间通常是要走的路，因为从技术上讲，Date（）对象是javascript而不是JSON，并且您不太可能找到生成它们的现成序列化程序。 / p>

你也想格式化日期，就像这样 -

xAxis: {
  type: 'datetime',
  labels: {
    formatter: function() {
      return Highcharts.dateFormat('%e %b', this.value*1000); // milliseconds not seconds
    },
  }
}

日期格式设置已完成php style。

highcharts js库接受日期的格式是什么？

2 个答案: