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

 

 

http://kottenator.github.io/jquery-circle-progress/

jquery-circle-progress - jQuery Plugin to draw animated circular progress bars

 

1. 기본설정값 

 

  $('.chart1').circleProgress({
    size:200,
    //그래프 크기
    startAngle: -Math.PI/2 ,
    //시작지점 (기본값 Math.PI)
    value: 0.3,
    //그래프에 표시될 값 
    animation: false,
    //그래프가 그려지는 애니메이션 동작 여부
    fill: {gradient: ['#ff1e41', '#ff9f8e']}
  });

  $('.chart2').circleProgress({
    startAngle: -Math.PI/2 ,
    //시작지점 (기본값 Math.PI)
    value: 0.38,
    //그래프에 표시될 값 
    animation: true,
    //그래프가 그려지는 애니메이션 동작 여부
    reverse:true,
    //그래프가 반대방향으로 그려질지
    thickness:10,
    //그래프두께
    lineCap:'round',
    //그래프 선 모양
    fill: {gradient: ['#ff1e41', '#ff9f8e']},
    //그래프 선 색
    emptyFill: "rgba(0,0,0,0.3)",
    //그래프 빈칸색 기본값 rgba(0,0,0,0.1)
    animationStartValue:1.0,
    //애니메이션 시작값
  });

 

2. 관련 이벤트

.on('circle-animation-progress', 
      //그래프 애니메이션이 진행되는 동안 
      function(event, progress, stepValue) {
      //progress -현재 진행상탱 0.0~1.0
      //stepValue - 현재까지 그려진 그래프 값 
    $(this).find('strong').text(stepValue.toFixed(2).substr(1));
  });

 

circle-inited : 그래프 생성    function(event){ }

circle-animation-start : 애니메이션 시작  function(event){ }

circle-animation-progress :  애니메이션 진행중  function(event, animationProgress, stepValue){ }

circle-animation-end : 애니메이션 종료   function(event){ }

 

 

 

 

 

또 다른 플러그인

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