시간 직교 축

시간 스케일은 시간과 날짜를 표시하는데 사용됩니다. 눈금을 만들 대, 스케일의 크기에 따라 가장 편안한 단위를 기반으로 자동으로 계산합니다.

날짜 어댑터

시간 스케일은 날짜 라이브러리와 해당 어댑터가 모두 있어야 합니다. 기본적으로, Chart.js는 Moment.js 어댑터를 포함합니다. moment 제외하고 대신 사용가능한 다른 어댑터에서 선택할 수 있습니다.

날짜 설정

데이터 입력

x 축 데이터 포인트는 시간 스케일을 사용할 때 t 또는 x 속성을 통해 추가로 지정할 수 있습니다.

data: [{
    x: new Date(),
    y: 1
}, {
    t: new Date(),
    y: 10
}]

날짜 형식

시간 스케일에 날짜를 제공할 때, Chart.js는 Moment.js가 받아들이는 모든 유형을 지원합니다. 자세한 사항은 Moment.js 문서를 참고하세요.

설정 옵션

다음의 옵션은 시간 스케일에 의해 제공됩니다. 공통 눈금 설정에서 제공하는 옵션으로도 설정할 수 있습니다.

시간 단위

다음의 시간 측정이 지원됩니다. 이름은 특정 단위를 강제하기 위해 time.unit 설정 옵션에 문자열로 전달될 수 있습니다.

• 'millisecond'
• 'second'
• 'minute'
• 'hour'
• 'day'
• 'week'
• 'month'
• 'quarter'
• 'year'

예를 들어, 항상 월 단위를 표시하는 시간 스케일이 있는 차트를 생성하려면 다음 설정을 사용할 수 있습니다.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    unit: 'month'
                }
            }]
        }
    }
});

표시 형식

다음의 표시 형식은 서로 다른 시간 단위가 축 눈금 마크에 대한 문자열로 형성되는 방식을 설정하는데 사용됩니다 허용된 문자열 형식을 알고싶다면 Moment.js를 참고하세요.

예를 들어, 월과 연도를 보여주기 위해 quarter 단위의 표시 형식을 설정하려먼, 다음과 같은 설정이 차트 생성자에 전달되어야 합니다.

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                    displayFormats: {
                        quarter: 'MMM YYYY'
                    }
                }
            }]
        }
    }
});

스케일 분포

distribution 속성은 스케일을 따라 데이터 분포를 제어합니다:

• 'linear': 시간에 따라 데이터가 펼쳐집니다 (거리는 다를 수 있습니다)
• 'series': 데이터가 서로 같은 거리에 분산됩니다

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                distribution: 'series'
            }]
        }
    }
});

스케일 경계

bounds 속성은 스케일 경계 전략을 제어합니다 (min/max 시간 옵션 무시).

• 'data': 데이터가 완전히 표시되는지 확인하고 외부 라벨은 제거합니다
• 'ticks': 눈금이 완전히 표시되는지 확인하고 외부 데이터가 잘리도록 합니다

눈금 자원

ticks.source 속성은 눈금의 생성을 제어합니다.

• 'auto': 스케일 크기와 시간 옵션을 기반으로 "최적"의 눈금을 생성합니다
• 'data': 데이터로부터 눈금을 생성합니다 ( 데이터 {t|x|y} 객체의 레이블 포함)
• 'labels': 사용자가 준 labels에먼 눈금을 생성합니다

파서

만약 이 속성이 문자열로 정의된다면, Moment.js에서 날짜를 구문 분석하는데 사용할 사용자 지정 형식으로 해석됩니다.

만약 함수인 경우 적절한 데이터 값이 주어진 Moment.js 객체를 반환해야 합니다.