[자바스크립트플러그인]원형(도넛) 차트 그려주는 플러그인 옵션설정

https://github.com/rendro/easy-pie-chart

rendro/easy-pie-chart

 

 

차트를 직접그릴수 있지만,,

 

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

이글에서 소개한 방법은 반원만 가능하다.... 

 

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

이글에서 소개한 방법은 실제 웹사이트에 적용시 버벅거림 현상이 보인다.. 

 

이러한 여러가지 단점들을 보안하기위해 플러그인을 쓰는것도 좋다.. 

 

easy-pie-chart  라는 플러그인으로 아주 편리하게 사용가능하다..

 

 

 차트를 그릴 공간을 지정하고 원하는 css를 적용하고

 

data-percent 값에 원하는 그래프 % 값을 넣어준다. 

<div class="chart chart1" data-percent="55"><span class="title">chart1</span></div>

 

$('.chart1').easyPieChart({
    barColor: '#f16529',  //차트가 그려질 색
    trackColor: '#ccc',  // 차트가 그려지는 트랙의 기본 배경색(chart1 의 회색부분)
    scaleColor: '#fff', // 차트 테두리에 그려지는 기준선 (chart2	의 테두리 선)
    lineCap: 'butt', // 차트 선의 모양 chart1 butt / chart2 round / chart3 square
    lineWidth: 30, // 차트 선의 두께
    size: 200, // 차트크기
    animate: 1000, // 그려지는 시간 
    onStart: $.noop,
    onStop: $.noop
  });

 

 

 

 

 

또 다른 플러그인

[javascript/jQuery] - [jQuery 플러그인]원형차트그리기 jquery-circle-progress 사용법