선형 근축
선형 스케일은 차트 숫자 데이터를 위해 사용됩니다. 이름에서 알 수 있듯이 선형 삽입은 축의 중심과 관련하여 값이 있는 위치를 결정하는데 사용됩니다.
다음의 추가적인 설정 옵션은 방사형 선형 스케일에 의해 제공됩니다.
설정 옵션
축은 눈금, 각도 선 (중앙에서 바깥쪽으로 레이더 차트에서 나타나는 선), 포인트라벨 (레이더 차트에서 가장자리 주변의 라벨)에 대한 설정 속성들을 가집니다. 다음의 섹선에서는 해당 섹션의 각 속성을 정의합니다.
이름 | 유형 | 설명 |
---|---|---|
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이면 눈금 라벨 뒤에 배경을 그립니다. |
축 범위 설정
주어진 축 범위 설정의 숫자는 어떻게 서로 상호작용하닌지 이해하는게 중요합니다.
suggestedMax
와
suggestedMin
설정은 축 스케일을 사용하는
데이터 값만 변경합니다. 자동 맞춤 동작을 유지하는 동안
축의 범위를 확장하는데 유용합니다.
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*
설정에 반해, min
과
max
설정은 축의 끝을 명시적으로 설정합니다.
이 값들이 설정될 때 몇 데이터 포인트는 포여지지 않을 수
있습니다.
단계 크기
만약 설정된다면, 스케일 눈금은 증가 분당 하나씩 있는
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 참조). |