Jquery 원형그래프

 

 

예시

  $('.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,
    //애니메이션 시작값
  });

 

깃헙 사이트

github.com/kottenator/jquery-circle-progress

 

참고사이트

gahyun-web-diary.tistory.com/152