highcharts js图书馆接受日期的格式是什么? [英] What format does the highcharts js library accept for dates?

查看:99
本文介绍了highcharts js图书馆接受日期的格式是什么?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用highcharts,无法确定日期输入应该从Rails日期到日期的高分辨率接受格式。



在我的迁移文件中,我正在存储这样的日期:

  t.date:consumption_date 

该值以这种格式2012-03-25存储,然后进入终端并找到记录:

  =>星期六,2012年3月31日

当图表呈现时,单个点显示无效日期< b>。下面的数组获取输出到highcharts渲染

  [[Sun,2012年3月25日,1158],[Sat,2012年3月31日,1200]] 

当数据提交时,高图在其演示图表之一中使用的格式在jquery中的形式是:

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

如何摆脱无效日期通过将正确的日期格式提交给highcharts。

解决方案

内部Highcharts使用javascript日期数字(1970年1月1日以来的毫秒数)来表示日期。请参阅 Mozilla参考资料



要在轴上获取日期,首先需要将轴类型设置为'datetime':

  xAxis: {
type:'datetime'
}

指定系列数据(所有三个示例都会生成相同的图表):


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

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


  2. 指定确切日期使用Date.UTC方法。这种方式对人类来说是可读的:

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


  3. 或直接指定纪元时间:

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


jsfiddle 上的示例


I am using highcharts and cannot figure out what the date input should be from rails dates to the highcharts accepted format for dates.

In my migration file i am storing the date like this:

t.date :consumption_date

The value gets stored in this format "2012-03-25", and going to the terminal and finding the record i get this:

=>  Sat, 31 Mar 2012

When the chart renders, the individual points display Invalid date. The following array gets output to highcharts to render

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

The format that highcharts uses in one of their demo charts, when the data is submitted in jquery is of the form:

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

How can i get rid of the invalid date, by submitting the correct date format to highcharts.

解决方案

Internally Highcharts uses javascript Date numbers (the number of milliseconds since Jan 1st 1970) to represent dates. See Mozilla reference.

To get dates on an axis you will first need to set the axis type to 'datetime':

xAxis: {
    type: 'datetime'
}

You have a few options when specifying the series data (all three examples produce the same chart):

  1. Setting a start point and using a fixed interval between points

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

  2. Specifying the exact date using the Date.UTC method. This way its readable for humans:

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

  3. Or specifying the epoch time directly:

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

Example on jsfiddle

这篇关于highcharts js图书馆接受日期的格式是什么?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆