Canvas로 원형 그래프를 그려보자.

코드펜 링크 : https://codepen.io/lovefield/pen/aVzvaL

먼저 canvas는 css상으로 사이즈를 지정해 준다고 해도 실질적으로 캔버스 내부의 사이즈가 변한것이 아니므로 꼭 js를 이용해서 사이즈를 지정해줘야 합니다.

var canvas = document.querySelector('.canvas');

먼저 canvas를 선택해줍니다.

canvas.width = 300;
canvas.height = 300;

그리고 위와 같이 스크립트를 이용해서 사이즈를 지정해줘야 합니다.(css 로 지정하면 보여지는 화면은 변할지 몰라도 실질적으로 canvas 사이즈는 변하지 않는 상태 입니다.)

저희는 원형 그래프를 그려야 하기때문에 캔버스의 중심점에 대해서 변수를 잡아놔야 합니다.

var center_x = canvas.width / 2;
var center_y = canvas.height / 2;

위와 같이 canvas 사이즈의 절반을 기준으로 위치를 잡아줍니다.

자 이제 canvas에 원형을 그리기위해 context를 잡아줘야합니다.

var ct = canvas.getContext('2d');

context 를 지원하지 않는 브라우저를 대비해서 if문을 작성하고 캔버스를 한번 초기화 해줍니다.

if(canvas.getContext){
    ct.clearRect(0,0,canvas.width,canvas.height);
}

이제 마지막으로 중심점을 기준으로 원형을 그려주면 됩니다.

ct.fillStyle = '#00ff00'; // 색지정
ct.beginPath(); // Path 시작
ct.moveTo(center_x,center_y); // 중심점으로 이동
ct.arc(center_x,center_y,center_y - 50, 0 * Math.PI/180, 25 * Math.PI/180, flase); //x, y, 반지름, 시작점, 끝점, 그리는 방향
ct.closePath(); // path 끝
ct.fill(); // 채우기

개인적으로 arc 부분이 제일 어려웠는데요.

x,y 를 기준은 앞에 선언했던 중심점.

반지름은 캔버스 사이즈의 절반보다 50px 작게.

0 * Math.PI/180 는 수치상으로 원의 각도를 구하는 식입니다. 0 * 3.14/180이 되는 식이지요.

즉 각도를 0부터 25도까지 그리겟다는 코드입니다.

마지막 글씨 입니다.

center_x -= 12;
center_y += 6;
ct.fillText('6.94%',center_x + 70 * Math.cos(12.5 * Math.PI/180),center_y + 70 * Math.sin(12.5 * Math.PI/180));

일단 수학식이 많이들어가는데요.

원형을 중심으로 x,y 좌표를 구하는 식입니다.

첫번째 수치가 0부터 25도였기 때문에 그 중간점인 12.5도를 기준으로 x,y 좌표값을 구한것 입니다.

x,y 값의 자표는 삼각함수를 이용해 작성했습니다.

상단의 중심점을 변화시킨 것은 텍스트 사이즈 때문에 조절하기 위한 수치입니다.