วิธีรับ highcharts วันที่ในแกน x?

119

มีวิธีมาตรฐานในการหาวันที่บนแกน x สำหรับ Highcharts หรือไม่? ไม่พบในเอกสาร: http://www.highcharts.com/ref/#xAxis--type

เมื่อช่วงเวลาของฉันมีขนาดใหญ่พอก็จะแสดงวันที่ อย่างไรก็ตามเมื่อช่วงเวลาไม่มากพอก็จะแสดงชั่วโมงดังนี้:

ใส่คำอธิบายภาพที่นี่

นี่น้อยกว่าอุดมคติ ... ถ้าสามารถแสดงวันที่และเวลาในกรณีนี้ได้ก็จะดีมาก ใครรู้วิธีบ้าง

javascript highcharts

— เจฟฟ์
แหล่งที่มา

คำตอบ:

260

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: วันธรรมดาสั้น ๆ เช่น 'จันทร์'
% A: วันธรรมดายาวเช่น 'วันจันทร์'
% d: วันสองหลักของเดือน 01 ถึง 31
% e: วันของเดือน 1 ถึง 31
% b: เดือนสั้น ๆ เช่น 'ม.ค. '
% B: เดือนที่ยาวนานเช่น 'มกราคม'
% m: เลขเดือนสองหลัก 01 ถึง 12
% y: เลขสองหลักปีเช่น 09 สำหรับปี 2552
% Y: เลขสี่หลักปีเช่นปี 2552
% H: ตัวเลขสองหลักชั่วโมงในรูปแบบ 24 ชม. 00 ถึง 23
% I: ตัวเลขสองหลักชั่วโมงในรูปแบบ 12 ชม. 00 ถึง 11
% l (ตัวพิมพ์เล็ก L): ชั่วโมงในรูปแบบ 12 ชม. 1 ถึง 11
% M: เลขสองหลักนาที 00 ถึง 59
% p: ตัวพิมพ์ใหญ่ AM หรือ PM
% P: ตัวพิมพ์เล็ก AM หรือ PM
% S: วินาทีสองหลัก 00 ถึง 59

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

— eolsson
แหล่งที่มา

อาจเป็นคำถามโง่ ๆ แต่ด้วยความอยากรู้อยากเห็น ... คุณหารหัสวันที่ที่เหลือเหล่านี้ได้ที่ไหน? ข้อมูลอ้างอิงจะแสดงเฉพาะรูปแบบเริ่มต้นที่คุณรวมไว้

— buddyp450

ค้นพบโดยอ่านที่มาตรวจสอบวิธี dateFormat ที่นี่: Utilities.js

— eolsson

เพื่อเพิ่มสิ่งนี้รูปแบบเริ่มต้นสำหรับระดับการซูมปัจจุบันยังรวมถึงปุ่ม "มิลลิวินาที" ด้วย

— Cory

ขอบคุณมากสำหรับสิ่งนี้ - เอกสารนี้อ้างถึง "dateFormat" แต่ไม่ชัดเจนว่าพวกเขาคาดหวังให้คุณอ้างถึงวิธีการในแหล่งที่มาหรือที่อื่นในเอกสาร ช่วยฉันได้มาก :)

— จอน

ฉันตั้งค่าตามตัวอย่างของคุณ แต่ยังคงแสดงเป็นมิลลิวินาทีเมื่อฉันให้ข้อมูลบ่อยกว่าหนึ่งครั้งต่อวินาที คุณมีความคิดว่าทำไม?

— Niels Brinch

ตรวจสอบตัวอย่างนี้จาก Highcharts API

แทนที่สิ่งนี้

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

ด้วยสิ่งนี้

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

ดูที่นี่เกี่ยวกับdateFormat()ฟังก์ชัน

โปรดดูที่ - tickIntervalและpointInterval

— Bhesh Gurung
แหล่งที่มา

เป็นคำถามเก่า แต่คำตอบนี้มีประโยชน์มาก โดยเฉพาะลิงก์ตัวอย่างที่คุณแนบมา

— CyberMJ

ลิงก์ตัวอย่างไม่ทำงานอีกต่อไป ไม่มีอะไรเกิดขึ้นเมื่อเราเลือก Run

— Simsons

@Simsons ลิงก์ Highcharts ที่ฉันใช้มันตายไปแล้วดังนั้นฉันจึงอัปเดตลิงค์ ตอนนี้ซอดูเหมือนจะทำงาน

— Bhesh Gurung

นี่คือรายการรหัสวันที่ที่dateFormatยอมรับ: github.com/highcharts/highcharts/issues/…

— Trevor Gehman

คุณเขียนแบบนี้ -:

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

ตรวจสอบรูปแบบวันที่และเวลาอื่น ๆ ด้วย

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

— Ronniemittal
แหล่งที่มา