디자인 시안의 도넛 차트를 Chart.js로 구현하면서 기본 옵션만으로는 표현할 수 없는 부분을 플러그인으로 직접 만들었습니다.

결과물 보기 (CodePen)

왜 직접 만들었나

차트처럼 규칙이 없는 디자인은 이미지로 처리하는 편이 작업 시간 대비 효율적일 때가 많습니다. 하지만 데이터에 따라 바뀌는 차트라 코드로 그려야 했고, 코드로 하기로 했다면 없는 기능은 만들어서라도 맞춰야 한다고 생각했습니다. "모르면 찾아보고, 없으면 만들자"는 말에 공감하며 작업했습니다.

구현 방법

• 차트 종류: Chart.js doughnut
• 가운데 라벨: DoughnutLabel 플러그인 사용
• 조각이 잘려 나온 것처럼 보이는 효과: customDoughnutPlugin 플러그인을 직접 작성

Chart.js 2에서는 Chart.controllers.doughnut.extend로 컨트롤러를 확장할 수 있었지만, 3 이상에서는 방식이 달라졌습니다. 컨트롤러를 확장하는 대신, 차트가 그려지기 전에 플러그인에서 원하는 값만큼 호(arc)의 위치를 바꾸는 방식을 선택했습니다.

핵심은 customDoughnutPlugin과, 조각마다 얼마나 떨어뜨릴지 지정하려고 직접 만든 displacements 속성입니다. 라벨이 다른 조각 영역을 침범하는 경우에는 차트 바깥으로 빼도록 예외 처리를 했습니다.

참고한 자료

1. ChartJS - Pie with exploded slice & dropshadow
2. [D3.js] Pie Chart 응용