web-dev-qa-db-ja.com

highcharts jsライブラリは、日付に対してどの形式を受け入れますか？

私はハイチャートを使用していますが、日付の入力がRails日付からハイチャートで受け入れられる日付の形式までどのようなものであるかを理解できません。

私の移行ファイルでは、次のような日付を保存しています：

t.date :consumption_date

値はこの形式 "2012-03-25"で保存され、ターミナルに移動してレコードを見つけます。

=>  Sat, 31 Mar 2012

チャートがレンダリングされると、個々のポイントが表示されます 無効な日付。次の配列は、ハイチャートに出力を取得してレンダリングします

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

データがjqueryで送信されるときに、highchartsがデモチャートの1つで使用する形式は次の形式です。

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

正しい日付形式をハイチャートに送信することにより、無効な日付を取り除くにはどうすればよいですか？.

javascripthighcharts
33
Hishalv

内部的にHighchartsは、javascriptの日付番号（1970年1月1日からのミリ秒数）を使用して日付を表します。 Mozillaリファレンス を参照してください。

軸の日付を取得するには、まず軸タイプを「datetime」に設定する必要があります。

xAxis: {
    type: 'datetime'
}

系列データを指定する場合、いくつかのオプションがあります（3つの例はすべて同じグラフを作成します）。

  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 の例

39
eolsson

@eolssonに追加すると、技術的にはDate（）オブジェクトはJSONではなくjavascriptであり、それらを生成する市販のシリアライザーを見つける可能性は低いため、エポック時間は通常、進むべき方法です。

日付もフォーマットする必要があります。次のようなものです。

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

日付のフォーマットが完了しました phpスタイル 。

4
s29