[CSS]그라디언트를 이용해 간단하게 원형차트/도넛차트 그리기(애니메이션으로 차트그리기 )

conic-gradient를 이용해 원형차트 그리기

  background: conic-gradient(#8b22ff 0% 25%, #ffc33b 25% 56%, #21f3d6 56% 100%);

%로 영역을 나누어 그라디언트를 이용해 배경을 칠하고, 

border-radius : 50% 를 이용해 원으로 만들면 원형 차트가된다.

 

가운데에 흰색으로 가려주면 도넛 차트도 그릴 수 있다. 

 

 

 

 

css 차트 그리고 싶을때 

애니메이션 효과 참고 keyframes를 이용해서 그라디언트를 조금씩 늘려준다. 

script 로는 setInterval을 이용해서 반복적으로 조금씩 늘려줄수 있지만 keyframes으로는 직접 구간에 따라 조금씩 늘려줘야한다 

안그러면 뚝뚝 끊겨보인다... 

 

 

 

자연스럽게 그려지도록 하려면 jquery를 이용해서 그려지는 효과도 낼 수 있다.

 

 

 

 

스크립트 없이 CSS만으로 애니메이션 효과를 내고싶다면 조금 다른 방법을 써야한다. (반원만가능)

 

[CSS] - [CSS]CSS만을 이용해서 차트 그리기

 

 

 

---

좀더 편한 방법은 플러그인을 쓰는것

 

[javascript] - [자바스크립트플러그인]도넛 차트 그려주는 플러그인