엘리먼트
각 데이터집합의 스타일링 설정을 위해 차트 유형 세팅을 제공하는 동안, 간혹 모든 데이터 집합에 같은 스타일을 지정하고 싶을 수 있습니다. 흔한 예시로 막대 차트 안에 모든 막대들의 선을 같은 색깔로 하는 대신 각 데이터집합에 따라 채우기 색상을 다르게 하고 싶은 경우입니다. 4가지 유형의 엘리먼트에 대해 옵션을 구성할 수 있습니다: arc, lines, points, 그리고 rectangles. 이 옵션을 설정하면, 데이터집합에 특별한 설정을 추가하지 않는 한 해당 유형의 모든 객체에 적용됩니다.
전역 설정
엘리먼트 옵션은 차트 또는 전역적으로 지정할 수 있습니다.
전역 설정은 Chart.defaults.global.elements 에 정의할 수 있습니다. 예를 들어,
모든 막대 차트에 전역으로 선 두께를 지정하고 싶다면:
Chart.defaults.global.elements.rectangle.borderWidth = 2;
포인트 설정
포인트 엘리먼트는 레이더 또는 버블 차트의 선 안에 포인트를 표현할 때 사용합니다.
전역 포인트 옵션:
Chart.defaults.global.elements.point.
| 이름 | 유형 | 기본 값 | 설명 |
|---|---|---|---|
radius |
number |
3 |
포인트 반지름. |
pointStyle
|
string|Image |
'circle' |
포인트 스타일. |
rotation |
number |
0 |
포인트 회전정도 (도 단위). |
backgroundColor |
Color |
'rgba(0, 0, 0, 0.1)' |
포인트 채우기 색상. |
borderWidth |
number |
1 |
포인트 선 두께. |
borderColor |
Color |
'rgba(0, 0, 0, 0.1)' |
포인트 선 색상. |
hitRadius |
number |
1 |
클릭이 감지되었을 때 적용할 추가 포인트 반지름 설정입니다. |
hoverRadius |
number |
4 |
호버되었을 때 포인트 반지름. |
hoverBorderWidth |
number |
1 |
호버되었을 때 선 두께. |
포인트 스타일
다음의 값들이 지원됩니다:
'circle''cross''crossRot''dash''line''rect''rectRounded''rectRot''star''triangle'
만약 값이 이미지라면, 그 이미지는 캔버스의 drawImage를 사용하여 그려집니다.
선 설정
선 엘리먼트는 선 차트의 선을 표현하기 위해 사용됩니다.
전역 선 옵션:
Chart.defaults.global.elements.line.
| 이름 | 유형 | 기본 값 | 설명 |
|---|---|---|---|
tension |
number |
0.4 |
베지에 곡선 장력 (베지에 곡선이 없을 때 0).
|
backgroundColor |
Color |
'rgba(0, 0, 0, 0.1)' |
선 채우기 색상. |
borderWidth |
number |
3 |
선 두께. |
borderColor |
Color |
'rgba(0, 0, 0, 0.1)' |
선 색상. |
borderCapStyle |
string |
'butt' |
선 캡 스타일. MDN을 확인해주세요. |
borderDash |
number[] |
[] |
점선. MDN을 확인해주세요. |
borderDashOffset |
number |
0.0 |
점선 오프셋. MDN을 확인해주세요. |
borderJoinStyle |
string |
'miter' |
선 조인 스타일. MDN을 확인해주세요. |
capBezierPoints |
boolean |
true |
true이면 차트내에 베지에 제어를 유지합니다,
false때는 제한이 없습니다.
|
cubicInterpolationMode |
string |
'default' |
삽입 모드 적용을 위한 설정. 더보기... |
fill |
boolean|string |
true |
선 아래 영역을 어떻게 채울지 설정. 영역 차트를 확인해주세요. |
stepped |
boolean |
false |
true이면 층계가 있는 선을 보여줍니다
(tension은 무시됩니다).
|
직사각형 설정
직사각형 엘리먼트는 막대 차트안의 막대를 표현할 때 사용됩니다.
전역 직사각형 옵션:
Chart.defaults.global.elements.rectangle.
| 이름 | 유형 | 기본 값 | 설명 |
|---|---|---|---|
backgroundColor |
Color |
'rgba(0, 0, 0, 0.1)' |
막대 채우기 색상. |
borderWidth |
number |
0 |
막대 선 두께. |
borderColor |
Color |
'rgba(0, 0, 0, 0.1)' |
막대 선 색상. |
borderSkipped |
string |
'bottom' |
(제외된) 선 생략:
'bottom',
'left',
'top' 또는
'right'.
|
원호 설정
원호는 극좌표, 도넛 그리고 파이 차트에서 사용됩니다.
전역 원호 옵션:
Chart.defaults.global.elements.arc.
| 이름 | 유형 | 기본 값 | 설명 |
|---|---|---|---|
angle - for polar only |
number |
circumference / (arc count) |
커버할 원호 각도. |
backgroundColor |
Color |
'rgba(0, 0, 0, 0.1)' |
원호 채우기 색상. |
borderAlign |
string |
'center' |
원호 선 정렬. |
borderColor |
Color |
'#fff' |
원호 선 색상. |
borderWidth |
number |
2 |
원호 선 두께. |