Làm cách nào để lấy ngày tháng trên biểu đồ cao trong trục x?

119

Có cách chuẩn nào để lấy ngày trên trục x cho Biểu đồ cao không? Không thể tìm thấy nó trong tài liệu của họ: http://www.highcharts.com/ref/#xAxis--type

Khi phạm vi thời gian của tôi đủ lớn, nó sẽ hiển thị ngày tháng. Tuy nhiên, khi phạm vi thời gian không đủ lớn, nó chỉ hiển thị giờ, như thế này:

nhập mô tả hình ảnh ở đây

Điều này kém lý tưởng hơn ... nếu nó có thể hiển thị ngày và giờ trong trường hợp này, điều đó thật tuyệt. Bất cứ ai biết làm thế nào?

javascript highcharts

— Jeff
nguồn

Câu trả lời:

260

Highcharts sẽ tự động cố gắng tìm định dạng tốt nhất cho phạm vi thu phóng hiện tại. Điều này được thực hiện nếu xAxis có loại 'datetime'. Tiếp theo, đơn vị của thu phóng hiện tại được tính toán, nó có thể là một trong số:

thứ hai
phút
giờ
ngày
tuần
tháng
năm

Đơn vị này sau đó được sử dụng để tìm định dạng cho các nhãn trục. Các mẫu mặc định là:

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

Nếu bạn muốn ngày là một phần của nhãn cấp độ "giờ", bạn nên thay đổi dateTimeLabelFormatstùy chọn cho cấp độ đó bao gồm %dhoặc %e. Đây là những người bảo trợ có sẵn:

% a: Ngày ngắn trong tuần, chẳng hạn như 'Thứ Hai'.
% A: Ngày dài trong tuần, chẳng hạn như 'Thứ Hai'.
% d: Ngày có hai chữ số trong tháng, từ 01 đến 31.
% e: Ngày trong tháng, từ 1 đến 31.
% b: Tháng ngắn hạn, như 'Jan'.
% B: Tháng dài, chẳng hạn như 'tháng Giêng'.
% m: Số tháng có hai chữ số, từ 01 đến 12.
% y: Năm có hai chữ số, chẳng hạn như 09 cho năm 2009.
% Y: Năm bốn chữ số, như 2009.
% H: Hai chữ số giờ ở định dạng 24h, 00 đến 23.
% I: Hai chữ số giờ ở định dạng 12h, 00 đến 11.
% l (Chữ thường L): Giờ ở định dạng 12h, từ 1 đến 11.
% M: Hai chữ số phút, 00 đến 59.
% p: Chữ hoa AM hoặc PM.
% P: Chữ thường AM hoặc PM.
% S: Hai chữ số giây, 00 đến 59

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

— eolsson
nguồn

Có thể là một câu hỏi ngu ngốc nhưng vì tò mò ... bạn đã tìm thấy phần còn lại của những mã ngày này ở đâu? Tham chiếu chỉ hiển thị các mẫu mặc định bạn đã đưa vào.

— buddyp450

Tìm thấy bằng cách đọc các nguồn, kiểm tra các phương pháp DateFormat đây: Utilities.js

— eolsson

Chỉ để thêm vào điều này, mẫu mặc định cho mức thu phóng hiện tại cũng bao gồm phím 'mili giây'.

— Cory

Rất cảm ơn vì điều này - tài liệu đề cập đến "dateFormat", nhưng không rõ liệu họ có mong đợi bạn tham khảo phương pháp trong nguồn hay ở một nơi nào khác trong tài liệu hay không. Đã tiết kiệm cho tôi rất nhiều thời gian :)

— Jon

Tôi đã thiết lập nó như trong ví dụ của bạn, nhưng nó vẫn hiển thị mili giây khi tôi cung cấp dữ liệu thường xuyên hơn một lần mỗi giây. Bạn có bất kỳ ý tưởng tại sao?

— Niels Brinch

Kiểm tra mẫu này từ API Highcharts.

Thay thế cái này

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

Với cái này

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

Xem ở đây về dateFormat()chức năng.

Cũng xem - tickInterval và pointInterval

— Bhesh Gurung
nguồn

Đó là một câu hỏi cũ, nhưng câu trả lời này rất hữu ích. Đặc biệt là liên kết ví dụ bạn đính kèm.

— CyberMJ

Liên kết mẫu không hoạt động nữa. Không có gì xảy ra khi chúng ta chọn Run.

— Simsons

@Simsons Liên kết Highcharts tôi sử dụng trên đó đã chết, vì vậy tôi đã cập nhật liên kết. Bây giờ, fiddle dường như đang hoạt động.

— Bhesh Gurung

Đây là danh sách các mã ngày được dateFormatchấp nhận: github.com/highcharts/highcharts/issues/…

— Trevor Gehman

Bạn viết như thế này-:

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

cũng kiểm tra định dạng ngày giờ khác

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

— Ronniemittal
nguồn