[Jquery] 원형 그래프 플러그인

그래프를 사용할일이 종종 있다, 수많은 그래프가 많이 있지만

쉽고 간단하게 사용할수 있는 그래프가 있어서 기록을 합니다.

파일명은 circle-progress.js 라는 파일로써 생각보다 기능도 많고

괜찮게 쓸수 있는 플러그 인이네요.

해당 플러그인 Github 주소입니다.

https://github.com/kottenator/jquery-circle-progress

플러그인 파일은 위에 주소에서 받으면 됩니다.

See the Pen circle-progress by DeokHwan (@deokhwan) on CodePen.

예제로 만들어본 부분이니 참고하면 좋을것 같습니다.

아래 내용은 옵션입니다.

Option	Description
value	This is the only required option. It should be from 0.0 to 1.0 Default: 0
size	Size of the circle / canvas in pixels Default: 100
startAngle	Initial angle (for 0 value) Default: -Math.PI
reverse	Reverse animation and arc draw Default: false
thickness	Width of the arc. By default it's automatically calculated as 1/14 of size but you may set your own number Default: "auto"
lineCap	Arc line cap: "butt", "round" or "square" - read more Default: "butt"
fill	The arc fill config. You may specify next: - "#ff1e41" - { color: "#ff1e41" } - { color: 'rgba(255, 255, 255, .3)' } - { gradient: ["red", "green", "blue"] } - { gradient: [["red", .2], ["green", .3], ["blue", .8]] } - { gradient: [ ... ], gradientAngle: Math.PI / 4 } - { gradient: [ ... ], gradientDirection: [x0, y0, x1, y1] } - { image: "http://i.imgur.com/pT0i89v.png" } - { image: imageInstance } - { color: "lime", image: "http://i.imgur.com/pT0i89v.png" } Default: { gradient: ["#3aeabb", "#fdd250"] }
emptyFill	Color of the "empty" arc. Only a color fill supported by now Default: "rgba(0, 0, 0, .1)"
animation	Animation config. See jQuery animations. You may also set it to false Default: { duration: 1200, easing: "circleProgressEasing" } "circleProgressEasing" is just a ease-in-out-cubic easing
animationStartValue	Default animation starts at 0.0 and ends at specified value. Let's call this direct animation. If you want to make reversed animation then you should set animationStartValue to 1.0. Also you may specify any other value from 0.0 to 1.0 Default: 0.0
insertMode	Canvas insertion mode: append or prepend it into the parent element? Default: "prepend"

원문을 그대로 가져왔으니 github에서 봐도 무방합니다...

언제 또 사라질지 몰라서 혹시나 해서 옵션부분만 가져왔습니다...

참고하면 될듯합니다. ^^