dateTimeLabelFormats (tooltip properties)

시간 축 차트에서 툴팁 머리글의 날짜 형식을 데이터 간격 단위별로 설정합니다.
데이터 간격에 맞는 단위의 형식이 선택됩니다 (예: 하루 간격 데이터는 day). 모든 경우에 같은 형식을 쓰려면 xDateFormat을 사용합니다. 형식 문자는 dateFormat 메서드와 같습니다.
7.3.1.31 이하에서는 날짜 형식에 한글을 넣으면 툴팁에 형식 문자열이 그대로 표시됩니다. 이 경우 formatter에서 dateFormat 메서드를 사용합니다. (7.3.1.32부터 한글 사용 가능)

Info

name type required(default) description
dateTimeLabelFormats object 선택 시간 축 차트에서 툴팁 머리글의 날짜 형식을 데이터 간격 단위별로 설정합니다.
dateTimeLabelFormats.millisecond string 선택 밀리초 간격 데이터의 형식 (예: "%H:%M:%S.%L")
dateTimeLabelFormats.second string 선택 초 간격 (예: "%H:%M:%S")
dateTimeLabelFormats.minute string 선택 분 간격 (예: "%H:%M")
dateTimeLabelFormats.hour string 선택 시 간격 (예: "%H시")
dateTimeLabelFormats.day string 선택 일 간격 (예: "%Y-%m-%d")
dateTimeLabelFormats.week string 선택 주 간격 (예: "%Y-%m-%d 주")
dateTimeLabelFormats.month string 선택 월 간격 (예: "%Y년 %m월")
dateTimeLabelFormats.year string 선택 연 간격 (예: "%Y년")

형식 문자

형식 문자열 안의 % 문자가 날짜 값으로 바뀌고, 나머지 글자(년, -, :, 공백 등)는 그대로 표시됩니다. 예: "%Y년 %m월 %d일 (%a)" → 2025년 01월 05일 (일)

형식 문자 의미 예 (2025-01-05 일요일 14:07:09.045)
%Y 연도 4자리 2025
%y 연도 2자리 25
%m 월 2자리 01
%B 월 이름 (IBLANG의 months) 1월
%b 월 약자 (shortMonths) 1
%d 일 2자리 05
%e 일 (한 자리면 앞에 공백 한 칸) 5
%A 요일 (weekdays) 일요일
%a 요일 약자 (shortWeekdays) 일
%w 요일 숫자 (일요일 0 ~ 토요일 6) 0
%H 시 24시간 2자리 14
%k 시 24시간 (앞에 0 없음) 14
%I 시 12시간 2자리 02
%l 시 12시간 (앞에 0 없음) 2
%p AM/PM 표시 (대문자) PM
%P am/pm 표시 (소문자) pm
%M 분 2자리 07
%S 초 2자리 09
%L 밀리초 3자리 045

단위별 기본 형식

툴팁에 표시할 포인트의 간격과 시각으로 단위가 정해집니다. 포인트 간격이 그 단위 이상이고 포인트 시각이 그 단위의 시작(예: week는 월요일 0시, month는 1일 0시)이면 그 단위를, 아니면 더 작은 단위를 사용합니다.
예를 들어 30일 간격 데이터라도 날짜가 1일이 아니면 month가 아니라 day 형식으로 표시됩니다. 지정하지 않은 단위는 아래 기본 형식으로 표시됩니다.

단위 사용되는 경우 기본 형식으로 표시되는 예
millisecond 포인트 간격이 1초 미만 1월 5일 일요일 오후 02:07:09.045
second 간격 1초 이상, 시각이 정확히 초 단위 1월 5일 일요일 오후 02:07:09
minute 간격 1분 이상, 시각이 0초 1월 5일 일요일 오후 02:07
hour 간격 1시간 이상, 시각이 정시 1월 5일 일요일 오후 02:00
day 간격 1일 이상, 시각이 0시 2025년 1월 5일 일요일
week 간격 7일 이상, 시각이 월요일 0시 주 시작일 2025년 1월 6일 월요일
month 간격 1개월 이상, 시각이 1일 0시 2025년 1월
year 간격 1년 이상, 시각이 1월 1일 0시 2025

Example

myChart.setOptions({
  chart: {
    type: "line"
  },
  xAxis: {
    type: "datetime"
  },
  tooltip: {
    dateTimeLabelFormats: {
      day: "%Y-%m-%d",     // 하루 간격 데이터: 2025-01-02
      month: "%Y-%m"       // 한 달 간격 데이터: 2025-01
    }
  },
  series: [{
    name: "방문자",
    data: [
      [Date.UTC(2025, 0, 1), 120],
      [Date.UTC(2025, 0, 2), 150],
      [Date.UTC(2025, 0, 3), 90]
    ]
  }]
}, {
  append: true,
  redraw: true
});

제공 버전

version desc
7.3.0.0