Bagaimana cara mendapatkan tanggal highchart di sumbu x?

119

Apakah ada cara standar untuk mendapatkan tanggal pada sumbu x untuk Highchart? Tidak dapat menemukannya di dokumentasi mereka: http://www.highcharts.com/ref/#xAxis--type

Ketika rentang waktu saya cukup besar, ini menunjukkan tanggal. Namun, jika rentang waktu tidak cukup besar, ini hanya menampilkan jam, seperti ini:

masukkan deskripsi gambar di sini

Ini kurang dari ideal ... jika bisa menunjukkan tanggal dan waktu dalam kasus ini, itu bagus. Ada yang tahu caranya?

javascript highcharts

— Jeff
sumber

Jawaban:

260

Highchart akan secara otomatis mencoba menemukan format terbaik untuk rentang zoom saat ini. Ini dilakukan jika xAxis memiliki tipe 'datetime'. Selanjutnya unit zoom saat ini dihitung, bisa jadi salah satu dari:

kedua
menit
jam
hari
minggu
bulan
tahun

Unit ini kemudian digunakan untuk mencari format label sumbu. Pola defaultnya adalah:

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

Jika Anda ingin hari menjadi bagian dari label tingkat "jam", Anda harus mengubah dateTimeLabelFormatsopsi untuk menyertakan tingkat %datau %e. Ini adalah pola yang tersedia:

% a: Hari kerja yang pendek, seperti 'Mon'.
% A: Hari kerja yang panjang, seperti 'Senin'.
% d: Dua digit hari dalam sebulan, 01 hingga 31.
% e: Hari dalam sebulan, 1 sampai 31.
% b: Bulan pendek, seperti 'Jan'.
% B: Bulan panjang, seperti 'Januari'.
% m: Dua digit angka bulan, 01 sampai 12.
% y: Dua digit tahun, seperti 09 untuk 2009.
% Y: Empat digit tahun, seperti 2009.
% H: Dua digit jam dalam format 24 jam, 00 hingga 23.
% I: Dua digit jam dalam format 12h, 00 sampai 11.
% l (Huruf kecil L): Jam dalam format 12 jam, 1 sampai 11.
% M: Dua digit menit, 00 sampai 59.
% p: Huruf besar AM atau PM.
% P: Huruf kecil AM atau PM.
% S: Dua digit detik, 00 sampai 59

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

— eolsson
sumber

Mungkin pertanyaan bodoh tapi karena penasaran ... di mana Anda menemukan sisa kode tanggal ini? Referensi hanya menunjukkan pola default yang Anda sertakan.

— buddyp450

Ditemukan dengan membaca sumbernya, periksa metode dateFormat di sini: Utilities.js

— eolsson

Sebagai tambahan, pola default untuk tingkat zoom saat ini juga menyertakan tombol 'milidetik'.

— Cory

Terima kasih banyak untuk ini - dokumentasinya mengacu pada "dateFormat", tetapi tidak jelas apakah mereka mengharapkan Anda untuk merujuk ke metode di sumber atau di tempat lain di dokumen. Menyelamatkan saya banyak waktu :)

— Jon

Saya menyiapkannya seperti pada contoh Anda, tetapi masih menunjukkan milidetik ketika saya memberikannya data lebih dari sekali per detik. Apakah kamu tahu kenapa?

— Niels Brinch

Lihat contoh ini dari Highcharts API.

Gantilah ini

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

Dengan ini

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

Lihat di sini tentang dateFormat()fungsinya.

Lihat juga - tickInterval dan pointInterval

— Bhesh Gurung
sumber

Ini pertanyaan lama, tapi jawaban ini sangat membantu. Terutama tautan contoh yang Anda lampirkan.

— CyberMJ

Tautan sampel tidak berfungsi lagi. Tidak ada yang terjadi saat kami memilih Jalankan.

— Simsons

@Simsons Tautan Highcharts yang saya gunakan sudah mati, jadi saya memperbarui tautannya. Sekarang, biola itu sepertinya berfungsi.

— Bhesh Gurung

Berikut adalah daftar kode tanggal yang dateFormatmenerima: github.com/highcharts/highcharts/issues/…

— Trevor Gehman

Anda menulis seperti ini-:

xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
           day: '%d %b %Y'    //ex- 01 Jan 2016
        }
}

periksa juga format tanggal waktu lainnya

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

— Ronniemittal
sumber