X軸のハイチャート日付を取得するにはどうすればよいですか?


119

HighchartsのX軸の日付を取得する標準的な方法はありますか?ドキュメントで見つけることができません:http : //www.highcharts.com/ref/#xAxis--type

時間範囲が十分に広い場合、日付が表示されます。ただし、時間範囲が十分に大きくない場合は、次のように時間だけが表示されます。

ここに画像の説明を入力してください

これは理想的ではありません...この場合に日付と時刻を表示できれば、それは素晴らしいことです。誰か知ってる?

回答:


259

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:「Mon」のような短い平日。
  • %A:「Monday」のような長い平日。
  • %d:月の2桁の日、01〜31。
  • %e:日、1〜31。
  • %b:「Jan」のような短い月。
  • %B:「January」のような長い月。
  • %m:2桁の月番号、01から12。
  • %y:2009の09のような2桁の年。
  • %Y:2009のような4桁の年。
  • %H:24時間形式の00から23までの2桁の時間。
  • %I:00から11までの12時間形式の2桁の時間。
  • %l(小文字のL):12時間形式の時間、1〜11。
  • %M:00から59までの2桁の分。
  • %p:大文字のAMまたはPM。
  • %P:小文字のAMまたはPM。
  • %S:00から59までの2桁の秒

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


16
ばかげた質問かもしれませんが、好奇心から...これらの日付コードの残りをどこで見つけましたか?リファレンスには、含めたデフォルトのパターンのみが表示されます。
buddyp450 2012

20
ソースを読んで見つけた、こちらのdateFormatメソッドを確認してください:Utilities.js
eolsson

2
これに追加するために、現在のズームレベルのデフォルトパターンには「ミリ秒」キーも含まれています。
コーリー

1
これに対する大きな感謝—ドキュメントは "dateFormat"を参照していますが、ソース内のメソッドを参照することを期待しているか、ドキュメント内の他の場所を参照しているのかは不明です。時間の節約になりました:)
Jon

私はあなたの例のように設定しましたが、毎秒1回よりも頻繁にデータを与えると、ミリ秒が表示されます。なぜかわかりますか?
Niels Brinch 2013

32

Highcharts APIからこのサンプルを確認してください。

これを交換

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

これとともに

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

機能についてはこちらをご覧くださいdateFormat()

も参照してください-tickIntervalおよびpointInterval


古い質問ですが、この回答は非常に役に立ちました。特にあなたが付けたサンプルリンク。
Cyber​​MJ 2014年

サンプルリンクはもう機能していません。[実行]を選択しても何も起こりません。
Simsons

1
@Simsons私が使用したHighchartsリンクは無効だったので、リンクを更新しました。今、フィドルが機能しているようです。
Bhesh Gurung

ここでは、日付コードのリストであるdateFormat受け入れは:github.com/highcharts/highcharts/issues/...
トレヴァー・ゲーマン

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.