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.