도넛 과 파이형

파이와 도넛 차트는 차트에서 가장 흔하게 사용됩니다. 이 차트들은 세그먼트로 나뉘며, 각 세그먼트의 호는 각 데이터의 조각의 비례한 값을 보여줍니다.

데이터 사이에 관계 비율을 보여주는데 탁월합니다.

파이와 도넛 차트는 Chart.js에서 사실상 동일한 클래스이지만, 기본 값이 다르다는 한가지 차이가 있습니다 - 바로 cutoutPercentage 값이죠. 이것은 내부의 몇 퍼센트를 잘라내여 하는지를 나타냅니다. 파이 차트에선 0이 기본 값이고, 도넛 차트에선 50이 기본 값입니다.

또한 Chart 코어에서 두 개의 별칭으로 등록됩니다. 기본 값이 다른 것과 별칭이 다른 것 외에는 파이와 도넛은 정확이 같습니다.

사용 예시

// 파이 차트
var myPieChart = new Chart(ctx, {
    type: 'pie',
    data: data,
    options: options
});

// 도넛 차트
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: data,
    options: options
});

데이터집합 속성들

도넛/파이 차트는 각 데이터집합을 특정하는 속성들을 허용합니다. 이것들은 특정한 데이터집합에 대한 속성을 보여주는데 사용됩니다. 예를 들어, 데이터집합 호의 색상은 일반적으로 다음과 같은 방법으로 설정됩니다.

이름	유형	스크립트 할 수 있는지 여부	인테스 할 수 있는지 여부	기본 값
`backgroundColor`	`Color`	예	예	`'rgba(0, 0, 0, 0.1)'`
`borderAlign`	`string`	예	예	`'center'`
`borderColor`	`Color`	예	예	`'#fff'`
`borderWidth`	`number`	예	예	`2`
`data`	`number[]`	-	-	required
`hoverBackgroundColor`	`Color`	예	예	`undefined`
`hoverBorderColor`	`Color`	예	예	`undefined`
`hoverBorderWidth`	`number`	예	예	`undefined`
`weight`	`number`	-	-	`1`

스타일링

각 호의 스타일은 다음의 속성들로 제어할 수 있습니다:

이름	설명
`backgroundColor`	호의 배경색.
`borderColor`	호의 테두리 색상.
`borderWidth`	호의 테두리 넓이 (픽셀단위).
`weight`	데이터집합의 상대적 두께입니다. 넓이에 대한 값을 제공하면 모든 데이터집합 넓이 값들의 합에 대한 상대적 두께가 파이 또는 도넛 차트에 그려지는 이유입니다.

이 모든 값들이 undefined이면, 관련 elements.arc.* 옵션으로 대체됩니다.

테두리 정렬

다음의 값들은 borderAlign을 지원합니다.

'center' (default)
'inner'

'center'로 설정되면, 서로 옆에 있는 호의 테두리들이 겹쳐집니다. 'inner'로 설정되면, 모든 테두리들은 겹치지 않습니다.

상호작용

각 호에 대한 상호작용은 다음의 속성들로 제어할 수 있습니다:

이름	설명
`hoverBackgroundColor`	호버했을 때 호의 배경 색.
`hoverBorderColor`	호버했을 때 호의 테두리 색.
`hoverBorderWidth`	호버했을 때 호의 테두리 두께 (픽셀단위).

이 모든 값들이 undefined이면, 관련 elements.arc.* 옵션으로 대체됩니다.

설정 옵션

파이 & 도넛 차트에 관련된 사용자 지정 옵션입니다. 이 옵션들은 전역 차트 설정 옵션과 합쳐져 차트의 옵션을 형성합니다.

이름	유형	기본 값	설명
`cutoutPercentage`	`number`	`50` - 도넛 차트, `0` - 파이 차트	차트의 중앙을 자르는 백분율.
`rotation`	`number`	`-0.5 * Math.PI`	호를 그릴 시작 각도.
`circumference`	`number`	`2 * Math.PI`	호가 덮일 수 있도록 허용.
`animation.animateRotate`	`boolean`	`true`	true이면, 차트가 회전 애니메이션으로 애니메이션 합니다. 이 속성은 `options.animation` 객체 안에 존재합니다.
`animation.animateScale`	`boolean`	`false`	true이면, 중앙에서 바깥쪽으로 차트 배율을 애니메이션 합니다.

기본 옵션

또한 각 도넛 유형이 생성될 때 기본 값을 변경할 수 있습니다, 이 객체는 Chart.defaults.doughnut에서 사용가능합니다. 파이 차트에는 Chart.defaults.pie에서 변경할 수 있는 이러한 기본 값의 복제본이 있으며, 유일한 차이점은 cutoutPercentage가 0으로 설정되어 있다는 점입니다.

데이터 구조

파이 차트에서, 데이터 지점들의 배열을 담은 데이터집합이 필요합니다. 데이터 지점들은 반드시 숫자여야 하며, Chart.js는 각 관련 비율의 모든 숫자들을 합하고 계산합니다.

또한 툴팁을 정확히 표현할 수 있는 라벨의 배열을 지정해줘야 합니다.

data = {
    datasets: [{
        data: [10, 20, 30]
    }],

    // 이 라벨들은 다른 호들을 호버했을 때 툴팁과 범례 안에서 표현됩니다
    labels: [
        'Red',
        'Yellow',
        'Blue'
    ]
};

도넛 & 파이형