x 축에서 highcharts 날짜를 얻는 방법은 무엇입니까?


119

Highcharts의 x 축에서 날짜를 가져 오는 표준 방법이 있습니까? 문서에서 찾을 수 없습니다 : http://www.highcharts.com/ref/#xAxis--type

내 시간 범위가 충분히 크면 날짜가 표시됩니다. 그러나 시간 범위가 충분히 크지 않으면 다음과 같이 시간 만 표시됩니다.

여기에 이미지 설명 입력

이것은 이상적이지 않습니다.이 경우에 날짜와 시간을 표시 할 수 있다면 좋을 것입니다. 누구나 어떻게 알아?

답변:


259

Highcharts는 현재 확대 / 축소 범위에 가장 적합한 형식을 자동으로 찾으려고합니다. xAxis에 유형이있는 경우이 작업이 수행됩니다 'datetime'. 다음으로 현재 확대 / 축소 단위가 계산되며 다음 중 하나가 될 수 있습니다.

  • 둘째

이 단위는 축 레이블의 형식을 찾는 데 사용됩니다. 기본 패턴은 다음과 같습니다.

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

당신이 일이 "시간"-level 라벨의 일부가되고 싶은 경우에 당신은 변경해야 dateTimeLabelFormats그 수준에 대한 옵션이 포함 %d%e. 다음은 사용 가능한 패턴입니다.

  • % a : '월'처럼 짧은 평일.
  • % A : '월요일'처럼 긴 평일.
  • % d : 월의 두 자리 일, 01-31.
  • % e : 1 일부터 31 일까지의 날짜.
  • % b : 'Jan'과 같은 짧은 달.
  • % B : '1 월'과 같은 긴 월.
  • % m : 01에서 12까지의 두 자리 월 번호.
  • % y : 연도 2 자리, 2009 년은 09입니다.
  • % Y : 2009 년과 같이 4 자리 연도입니다.
  • % H : 00에서 23까지 24 시간 형식의 두 자리 시간입니다.
  • % I : 00부터 11까지 12 시간 형식의 두 자리 시간입니다.
  • % l (소문자 L) : 12 시간 형식의 시간, 1-11.
  • % M : 두 자리 분, 00에서 59까지.
  • % p : 대문자 AM 또는 PM.
  • % P : 소문자 AM 또는 PM.
  • % S : 두 자리 초, 00-59

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


16
어리석은 질문 일 수 있지만 호기심에서 ... 나머지 날짜 코드는 어디에서 찾았습니까? 참조에는 포함 된 기본 패턴 만 표시됩니다.
buddyp450 2008

20
소스를 읽어서 찾은 다음, 여기에서 dateFormat 메소드를 확인하십시오. Utilities.js
eolsson

2
여기에 추가하기 위해 현재 확대 / 축소 수준의 기본 패턴에는 '밀리 초'키도 포함됩니다.
Cory

1
이것에 대해 큰 감사를 표합니다. 문서는 "dateFormat"을 참조하지만 소스 또는 문서의 다른 곳에서 메소드를 참조 할 것으로 기대하는지 여부는 명확하지 않습니다. 나에게 : 시간의 무리 저장된

귀하의 예에서와 같이 설정했지만 초당 한 번 이상 데이터를 제공하면 여전히 밀리 초가 표시됩니다. 왜 그런지 아십니까?
Niels Brinch 2013-08-21

32

Highcharts API 에서이 샘플을 확인하세요 .

이것을 교체

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

이것으로

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

기능 에 대해 여기 를 보십시오 dateFormat().

또한 참조 - tickIntervalpointInterval


오래된 질문이지만이 답변은 매우 도움이되었습니다. 특히 첨부 한 예제 링크.
CyberMJ 2014 년

샘플 링크가 더 이상 작동하지 않습니다. 실행을 선택해도 아무 일도 일어나지 않습니다.
Simsons

1
@Simsons 내가 사용한 Highcharts 링크가 죽었 기 때문에 링크를 업데이트했습니다. 이제 바이올린이 작동하는 것 같습니다.
Bhesh Gurung

다음 날짜 코드의 목록입니다 dateFormat받아들이는 : github.com/highcharts/highcharts/issues/...
트레버 Gehman

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.