X ekseninde yüksek grafik tarihleri ​​nasıl elde edilir?


119

Highcharts için x ekseninde tarih almanın standart bir yolu var mı? Belgelerinde bulamıyorum: http://www.highcharts.com/ref/#xAxis--type

Zaman aralığım yeterince geniş olduğunda tarihleri ​​gösterir. Ancak, zaman aralığı yeterince geniş olmadığında, yalnızca aşağıdaki gibi saatleri gösterir:

görüntü açıklamasını buraya girin

Bu pek de ideal değil ... eğer bu durumda bir tarih ve saat gösterebilseydi harika olurdu. Nasıl olduğunu bilen var mı?

Yanıtlar:


260

Yüksek grafikler, mevcut yakınlaştırma aralığı için en iyi formatı otomatik olarak bulmaya çalışacaktır. Bu, xAxis türüne sahipse yapılır 'datetime'. Daha sonra mevcut yakınlaştırmanın birimi hesaplanır, aşağıdakilerden biri olabilir:

  • ikinci
  • dakika
  • saat
  • gün
  • hafta
  • ay
  • yıl

Bu birim daha sonra eksen etiketleri için bir format bulmak için kullanılır. Varsayılan modeller şunlardır:

second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'

Günün "saat" dateTimeLabelFormatsdüzeyi etiketlerinin bir parçası olmasını istiyorsanız, bu düzey için %dveya dahil etme seçeneğini değiştirmelisiniz %e. Mevcut desenler şunlardır:

  • % a: Hafta içi kısa, "Pzt" gibi.
  • % A: Hafta içi uzun, "Pazartesi" gibi.
  • % d: Ayın iki basamaklı günü, 01 - 31.
  • % e: 1'den 31'e kadar ayın günü.
  • % b: 'Ocak' gibi kısa bir ay.
  • % B: Uzun ay, 'Ocak' gibi.
  • % m: 01'den 12'ye kadar iki basamaklı ay numarası.
  • % y: İki basamaklı yıl, 2009 için 09 gibi.
  • % Y: 2009 gibi dört basamaklı yıl.
  • % H: 24 saat biçiminde iki basamaklı saat, 00 ile 23 arası.
  • % I: 12 saat biçiminde iki basamaklı saat, 00 ile 11 arası.
  • % l (Küçük harf L): 1'den 11'e 12 saat biçiminde saatler.
  • % M: İki basamaklı dakika, 00'dan 59'a.
  • % p: Büyük harf AM veya PM.
  • % P: Küçük harf AM veya PM.
  • % S: İki basamaklı saniye, 00'dan 59'a

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


16
Aptalca bir soru olabilir ama meraktan dolayı ... bu tarih kodlarının geri kalanını nerede buldunuz? Referans yalnızca dahil ettiğiniz varsayılan kalıpları gösterir.
buddyp450

20
Kaynak okunarak bulundu, burada dateFormat yöntemini kontrol edin: Utilities.js
eolsson

2
Buna ek olarak, mevcut yakınlaştırma seviyesi için varsayılan model ayrıca 'milisaniye' anahtarını da içerir.
Cory

1
Bunun için çok teşekkürler - dokümantasyon "dateFormat" a atıfta bulunuyor, ancak yönteme kaynakta mı yoksa dokümanlardaki başka bir yerde mi başvurmanızı bekledikleri belli değil. Beni çok zaman kurtardı :)
Jon

Sizin örneğinizdeki gibi ayarladım, ancak saniyede bir kereden fazla veri verdiğimde hala milisaniyeleri gösteriyor. neden olduğu hakkında bir fikrin var mı?
Niels Brinch

32

Bu örneği Highcharts API'sinden kontrol edin.

Bunu değiştir

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

Bununla

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

Fonksiyon hakkında buraya bakın dateFormat().

Ayrıca bkz - tickInterval ve pointInterval


Bu eski bir soru, ancak bu cevap çok yardımcı oldu. Özellikle eklediğiniz örnek bağlantı.
CyberMJ

Örnek bağlantı artık çalışmıyor. Çalıştır'ı seçtiğimizde hiçbir şey olmuyor.
Simsons

1
@Simsons Üzerinde kullandığım Highcharts bağlantısı kesildi, bu yüzden bağlantıyı güncelledim. Şimdi, keman işe yarıyor gibi görünüyor.
Bhesh Gurung

Kabul eden tarih kodlarının bir listesi dateFormat: github.com/highcharts/highcharts/issues/…
Trevor

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.