선형 근축

선형 스케일은 차트 숫자 데이터를 위해 사용됩니다. 이름에서 알 수 있듯이 선형 삽입은 축의 중심과 관련하여 값이 있는 위치를 결정하는데 사용됩니다.

다음의 추가적인 설정 옵션은 방사형 선형 스케일에 의해 제공됩니다.

설정 옵션

축은 눈금, 각도 선 (중앙에서 바깥쪽으로 레이더 차트에서 나타나는 선), 포인트라벨 (레이더 차트에서 가장자리 주변의 라벨)에 대한 설정 속성들을 가집니다. 다음의 섹선에서는 해당 섹션의 각 속성을 정의합니다.

이름 유형 설명
angleLines object 각도 선 설정. 더보기...
gridLines object 그리드 선 설정. 더보기...
pointLabels object 포인트 라벨 설정. 더보기...
ticks object 눈금 설정. 더보기...

눈금 옵션

다음의 옵션은 선형 스케일에 의해 제공됩니다. 모두 ticks 하위 옵션에 위치합니다. The 공통 눈금 설정 옵션은 이 축을 지원합니다.

이름 유형 기본 값 설명
backdropColor Color 'rgba(255, 255, 255, 0.75)' 라벨 배경의 색상.
backdropPaddingX number 2 라벨 배경의 가로 패딩.
backdropPaddingY number 2 라벨 배경의 세로 패딩.
beginAtZero boolean false true이면, 스케일은 이미 포함되어 있지 않다면 0을 포함합니다.
min number 스케일에 대한 사용자 정의 최소값은 데이터의 최소 값을 재정의합니다. 더보기...
max number 스케일에 대한 사용자 정의 최대값은 데이터의 최대 값을 재정의합니다. 더보기...
maxTicksLimit number 11 눈금의 최대 숫자와 그리드 선을 보여줍니다.
precision number 정의되고 stepSize 지정되지 않다면, 단계 크기는 이 소수점 이하 자릿수로 반올림됩니다.
stepSize number 스케일에 대한 사용자 지정 고정 단계 크기. 더보기...
suggestedMax number 최대 데이터 값을 계산할 때 사용되는 조정. 더보기...
suggestedMin number 최소 데이터 값을 계산할 때 사용되는 조정. 더보기...
showLabelBackdrop boolean true true이면 눈금 라벨 뒤에 배경을 그립니다.

축 범위 설정

주어진 축 범위 설정의 숫자는 어떻게 서로 상호작용하닌지 이해하는게 중요합니다.

suggestedMaxsuggestedMin 설정은 축 스케일을 사용하는 데이터 값만 변경합니다. 자동 맞춤 동작을 유지하는 동안 축의 범위를 확장하는데 유용합니다.

let minDataValue = Math.min(mostNegativeValue, options.ticks.suggestedMin);
let maxDataValue = Math.max(mostPositiveValue, options.ticks.suggestedMax);

이 예시에서 가장 큰 숫자는 50이지만 데이터 최대값은 100으로 확장됩니다. 그러나 가장 작은 데이터 값이 suggestedMin 설정보다 아래이므로 무시됩니다.

let chart = new Chart(ctx, {
    type: 'radar',
    data: {
        datasets: [{
            label: 'First dataset',
            data: [0, 20, 40, 50]
        }],
        labels: ['January', 'February', 'March', 'April']
    },
    options: {
        scale: {
            ticks: {
                suggestedMin: 50,
                suggestedMax: 100
            }
        }
    }
});

suggested* 설정에 반해, minmax 설정은 축의 끝을 명시적으로 설정합니다. 이 값들이 설정될 때 몇 데이터 포인트는 포여지지 않을 수 있습니다.

단계 크기

만약 설정된다면, 스케일 눈금은 증가 분당 하나씩 있는 stepSize의 배수에 의해 열거됩니다. 만약 설정되지 않았다면, 눈금은 nice numbers 알고리즘을 사용하여 자동으로 라벨이 지정됩니다.

이 예시에서는 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5에서 눈금을 만드는 y 축이 있는 차트를 설정합니다.

let options = {
    scale: {
        ticks: {
            max: 5,
            min: 0,
            stepSize: 0.5
        }
    }
};

각진 선 옵션

다음의 옵션은 차트 중앙에서 포인트 라벨까지 방사되는 각진 선을 설정하는데 사용됩니다. angleLines 하위 옵션에서 찾을 수 있습니다.

이름 유형 기본 값 설명
display boolean true true이면, 각도 선을 보여줍니다.
color Color 'rgba(0, 0, 0, 0.1)' 각도 선의 색상.
lineWidth number 1 각도 선의 두께.
borderDash number[] [] 각도 선 대시의 길이 및 간격. MDN 참조.
borderDashOffset number 0.0 선 대쉬를 위한 오프셋. MDN 참조.

포인트 라벨 옵션

다음의 옵션은 스케일의 둘레를 보여주는 포인트 라벨을 설정하는데 사용됩니다. pointLabels 하위 옵션에서 찾을 수 있습니다.

이름 유형 기본 값 설명
display boolean true true이면, 포인트 라벨이 보여집니다.
callback function 포인트 라벨의 데이터 라벨을 변환하기 위한 콜백 함수입니다. 현재 문자열을 반환하여 간단히 기본 구현이 되어있습니다.
fontColor Color|Color[] '#666' 포인트 라벨의 론트 색상.
fontFamily string "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" 라벨이 그려질 때 사용되는 글꼴 모음.
fontSize number 10 픽셀 단위의 폰트 크기.
fontStyle string 'normal' 포인트 라벨이 그려질 때 사용되는 폰트 스타일.
lineHeight number|string 1.2 텍스트의 각 선의 높이 ( MDN 참조).

results matching ""

    No results matching ""