새로운 축

Chart.js에서 축은 개별적으로 확장할 수 있습니다. 축은 항상 Chart.Scale로 부터 파생되야 하지만 필수 사항은 아닙니다.

let MyScale = Chart.Scale.extend({
    /* extensions ... */
});

// MyScale은 Chart.Scale로 부터 파생됩니다

스케일 클래스를 만든 후에는 사용할 수 있도록 전역 차트 객체와 함께 등록할 필요가 있습니다. 스케일에 대한 기본 설정은 생성자가 등록될 때 제공될 수 있습니다. 등록 함수에 대한 첫번째 매개변수는 차트에 사용하기 위한 스케일 유형을 식별하기 위해 나중에 사용된 문자열 키입니다.

Chart.scaleService.registerScaleType('myScale', MyScale, defaultConfigObject);

새로운 스케일을 사용하기 위해 차트가 생성될 때 설정에 문자열 키를 넘김으로 간단히 할 수 있습니다.

var lineChart = new Chart(ctx, {
    data: data,
    type: 'line',
    options: {
        scales: {
            yAxes: [{
                type: 'myScale' // registerScaleType 함수에 넘겨진 같은 키입니다
            }]
        }
    }
});

스케일 속성

스케일 인스턴스는 조정 프로세스 동안 다음의 속성들이 주어집니다.

{
    left: number, // 스케일 바운딩 상자의 왼쪽 가장자리
    right: number, // 바운딩 상자의 오른쪽 가장자리
    top: number,
    bottom: number,
    width: number, // 오른쪽 - 왼쪽과 동일
    height: number, // 아래 - 위와 동일

    // 양쪽 여백. css와 같이 바운딩 상자 바깥족.
    margins: {
        left: number,
        right: number,
        top: number,
        bottom: number
    },

    // 바운딩 상자 내부의 여백 양 (CSS와 같이)
    paddingLeft: number,
    paddingRight: number,
    paddingTop: number,
    paddingBottom: number
}

스케일 인터페이스

Chart.js로 작업하려면 사용자 지정 스케일 유형은 다음의 인터페이스로 구현되어야만 합니다.

{
    // 데이터 제한을 결정합니다. 데이터 max/min이 되는 this.min 과 this.max가 설정되어야만 합니다 
    determineDataLimits: function() {},

    // 눈금 마크를 생성합니다. this.chart는 차트 인스턴스입니다. 데이터 객체는 this.chart.data로 접근할 수 있습니다
    // 기본 클래스 구현을 사용하려는 경우 buildTicks()은 축 인스턴스의 눈금 배열로 생성되어야만 합니다
    buildTicks: function() {},

    // 주어진 데이터집합의 주어진 인덱스에서 데이터에 대해 표시할 값을 가져오니다. ie this.chart.data.datasets[datasetIndex].data[index]
    getLabelForIndex: function(index, datasetIndex) {},

    // 주어진 값에 대한 픽셀(가로 축에 대한 x 좌표, 세로 축에 대한 y 좌표)을 가져옵니다
    // @param index: 눈금 배열 안에 인덱스
    getPixelForTick: function(index) {},

    // 주어진 값의 픽셀(가로 축에 대한 x 좌표, 세로 축에 대한 y 좌표)을 가져옵니다
    // @param value : 픽셀을 가져올 값
    // @param index : 값의 데이터 배열 안에 인덱스
    // @param datasetIndex : 값을 가져온 데이터집합의 인덱스
    getPixelForValue: function(value, index, datasetIndex) {},

    // 주어진 픽셀(가로 축에 대한 x 좌표, 세로 축에 대한 y 좌표)에 대한 값을 가져옵니다
    // @param pixel : 픽셀 값
    getValueForPixel: function(pixel) {}
}

선택적으로 다음의 메소드는 재정의 될 수 있지만 구현은 이미 Chart.Scale 기본 클래스에서 제공되어 있습니다.

{
    // 스케일 인스턴스의 눈금 배열을 문자열로 변환합니다. 기본 구현은 간단히 this.options.ticks.callback(numericalTick, index, ticks); 호출합니다
    convertTicksToLabels: function() {},

    // 라벨을 얼마만큼 회전해야할지 결정합니다. 스케일이 수평일 경우 기본 구현은 라벨 회전만 합니다.
    calculateTickRotation: function() {},

    // 캔버스 내의 첫번째 스케일.
    // this.maxWidth 와 this.maxHeight는 스케일 인스턴스가 할 수 있는 최대 차원을 말해줍니다. 스케일은 캔버스 공간에서 가능한한 효율적이되도록 노력해야합니다.
    // this.margins는 확장한 스케일의 한쪽이 가지고 있는 공간의 양입니다. 최적의 라벨 회전 계산에 이미 사용되고 있습니다
    // 스케일의 크기를 위해 this.minSize를 반드시 설정해줘야 합니다. 2 속성을 포함한 객채여야 합니다: width 와 height.
    // 스케일의 넓이를 위해 this.width를 설정해줘야 하고 높이를 위해 this.height를 설정해줘야 합니다
    fit: function() {},

    // 캔버스에 스케일을 그립니다. this.(left|right|top|bottom)는 캔버스에서 그릴 영역을 알려줍니다
    // @param chartArea : 4개의 속성을 가진 객체입니다: left, right, top, bottom. 이것은 선, 막대 등의 그려질 직사각형입니다. 예를들어 그리드 선을 그리는데 사용할 수 있습니다.
    draw: function(chartArea) {}
}

Core.Scale 기본 클래스는 또한 유용할 수 있는 몇가지 유틸리티 함수도 있습니다.

{
    // 스케일 인스턴스가 수평일 때 true를 반환합니다
    isHorizontal: function() {},

    // this.chart.data.datasets[x].data[]의 값으로 부터 정확한 값을 가져옵니다
    // dataValue가 객체이면 isHorizontal()이 어떤 값을 반환하냐에 따라 .x 또는 .y 를 반환합니다
    // 만약 값이 undefined이면 NaN을 반환합니다
    // 그렇지 않으면 값을 반환합니다.
    // 모든 경우에서 반환되는 값은 숫자를 보장하지 않느다는 점을 주의해야 합니다
    getRightValue: function(dataValue) {},

    // 스케일 눈금 객체를 반환합니다 ({label, major})
    getTicks: function() {}
}