Chart를 뿌셔보자..

---

Chart.js 커스텀하기

가끔 그런경우가 있다..
규칙이 없어서 예외처리가 곤란할때..

개인적인 생각으로는 규칙이 없으면 이미지로 뽑는게 작업시간 비례 효율적이라 생각하는데
코드로 뽑기로 했으면 없는것도 만들어야 생각한다..
"모르면 찾아보고 없으면 만들자" 라는 글을 본 적 있는데 동감한다.

정리하기 앞서 Chart.js doughnut type을 수정할 예정이고 가운데 라벨은 DoughnutLabel 이라는 플러그인을 사용하였고
잘려보이는 효과를 이용하기위해 customDoughnutPlugin 이라는 플러그인을 작성하여 적용시켰다.

참고했던 내용은 아래에 첨부하겠습니다.

Chart.js 2버젼에서는 Chart.controllers.doughnut.extend 와 같이 커스텀할 내용을 추가가 가능했는데 3버젼 이상에서는 조금 다른방법을 이용해야함

하지만 굳이 그렇게 까지 할 필요성은 못느끼고 plugin을 이용하여 그려지기전 원하는 수치값만큼 호의 값을 변경하기로 생각함

최대한 label이 차트를 다른 영역을 침범할 경우 밖으로 빼는 예외처리를 진행하였으며
주요한 부분은 customDoughnutPlugin 와 displacements 이다.
displacements은 본인이 작업하면서 준 속성값입니다.

피드백은 언제든 환영입니다.

---

참고했던 내용들
1. ChartJS - Pie with exploded slice & dropshadow
2. [D3.js] Pie Chart 응용