직교 축

데카르트 그리드를 따르는 축을 'Cartesian Axes'라고 합니다. 직교 축은 선, 막대와 버블 차트에서 사용됩니다. 기본적으로 4개의 직교축이 Chart.js에에 포함되어 있습니다.

• 선형
• 대수
• 범주
• 시간

공통 설정

포함된 모든 직교 축은 여러가지 공통 옵션을 지원합니다.

틱 설정

다음의 옵션들은 모든 직교 축에 공통이지만 다른 축에는 적용되지 않습니다.

축 ID

dataset.xAxisID 또는 dataset.yAxisID 속성은 scales.xAxes.id 또는 scales.yAxes.id 속성과 일치해야 합니다. 특히 여러 축의 차트를 사용할 때 필요합니다.

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            // 이 데이터집합은 첫번째 축에 나타납니다
            yAxisID: 'first-y-axis'
        }, {
            // 이 데이터집합은 두번째 축에 나타납니다
            yAxisID: 'second-y-axis'
        }]
    },
    options: {
        scales: {
            yAxes: [{
                id: 'first-y-axis',
                type: 'linear'
            }, {
                id: 'second-y-axis',
                type: 'linear'
            }]
        }
    }
});

여러 축 만들기

직교축에서는 여러 X 와 Y 축을 만드는 것이 가능합니다. 그렇게 하기 위해 여러 xAxes 와 yAxes 속성 설정 객체를 추가할 수 있습니다. 새로운 축이 추가될 때 기본 유형이 사용되지 않으므로 새 축의 유형을 지정하는 것이 중요합니다.

아래의 예제에서 2개의 Y 축을 생성합니다. 그리고 yAxisID 속성을 사용하여 데이터집합을 올바른 축에 매핑합니다.

var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
            data: [20, 50, 100, 75, 25, 0],
            label: 'Left dataset',

            // 이렇게 하면 데이터집합이 왼쪽 y 축에 바인딩됩니다
            yAxisID: 'left-y-axis'
        }, {
            data: [0.1, 0.5, 1.0, 2.0, 1.5, 0],
            label: 'Right dataset',

            // 이렇게 하면 데이터집합이 오른쪽 y 축에 바인딩됩니다
            yAxisID: 'right-y-axis'
        }],
        labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
    },
    options: {
        scales: {
            yAxes: [{
                id: 'left-y-axis',
                type: 'linear',
                position: 'left'
            }, {
                id: 'right-y-axis',
                type: 'linear',
                position: 'right'
            }]
        }
    }
});