• HTML
  • JS
  • J볃교

pie그래프입니다.

2018-11-07 543

설명

  • 카카오톡 링크

pie 그래프입니다.
html,js 를 활용하였습니다

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<script type="text/javascript" src="js/circle.js"></script>
<div class="forth circle">
							  
</div>
<script type="text/javascript">
	var c4 = $('.forth.circle'); // 원하는 곳 선언
	
	c4.circleProgress({
		startAngle: -Math.PI / 6 * 3, //건들필요가 없요잉~
		value: 0.5, // max(1) min(0) 0 ~ 1 까지 50% 다 하면 value : 0.5 값을 넣어주시면됩니다~
		size:248, // 동그라미의 width / height 크기
		thickness:20, // 선 굵기
		emptyFill:'red', // 선의 배경 (background 가 아닌 선의 배경) 소스를 실행시켜보시면 확 알거에요~ rgba(0,0,0,0.5) 도 적용가능 , #000000 가능
		lineCap: 'round', // 선의 마무리 가 둥글게 될것인가 아닌가 차이 (이 라인을 주석처리 해보시면 확 알것입니다~)
		fill: {color: 'blue'} // 선의 색깔 (선의 배경마냥 rgba(), #000000 등 가능)
	});
</script>