이번 프로젝트에서 파이차트를 svg로 직접 만들어보려고 하였다.
유튜브와 학습 자료를 보며 정리한 내용을 글로 남기고자 한다.
1. 하나의 파이차트 그리기
- stroke-width : 반지름의 2배
- stroke-dasharray :
- 파이차트에서 하나의 파이는 stroke-dasharray로 나타낸다.
- 점선의 길이(첫 번째 인자): 파이 차트의 비율(n/100 2PI*r)
- 점선 사이의 길이(두 번째 인자): 원주의 값. 2PIr
<svg width="40" height="40" viewBox="0 0 40 40">
<circle
r="10"
cx="20"
cy="20"
fill="transparent"
stroke="tomato"
stroke-width="20"
stroke-dasharray="calc(40 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
/>
</svg>
이렇게까지 하면, 파이차트가 90도에서 시작하게 된다.
위 쪽부터 시작하도록 파이 차트를 옮겨야 한다.
2. 위치 옮기기
css의 transform으로 위치를 변화시킬 수 있다. 우선
rotate로 원을 돌리고, x축으로 지름의 길이 * 2를 내려오게 해야 한다.
x축 방향으로 옮기는 이유는 90도를 돌렸기 때문에 수직 방향은 x축이기 때문이다.
- 위치 옮기기 : transform(rotate(-90) translate(40))
<circle
r="10"
cx="20"
cy="20"
fill="transparent"
stroke="tomato"
stroke-width="20"
stroke-dasharray="calc(40 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
transform="rotate(-90) translate(-40)"
/>
3. 비율 정하기
stroke-dasharray="calc(n * 원주 / 100) 원주"
stroke-dasharray에서 n의 값을 변경시키면서 비율을 정할 수 있다.
모든 비율을 정하고 나면 다음과 같이 파이차트가 그려진다.
<svg width="40" height="40" viewBox="0 0 40 40">
<circle
r="10"
cx="20"
cy="20"
fill="transparent"
stroke="tomato"
stroke-width="20"
stroke-dasharray="calc(100 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
transform="rotate(-90) translate(-40)"
/>
<circle
r="10"
cx="20"
cy="20"
fill="transparent"
stroke="pink"
stroke-width="20"
stroke-dasharray="calc(80 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
transform="rotate(-90) translate(-40)"
/>
<circle
r="10"
cx="20"
cy="20"
fill="transparent"
stroke="yellow"
stroke-width="20"
stroke-dasharray="calc(50 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
transform="rotate(-90) translate(-40)"
/>
</svg>
- 로 공통된 값은 합치기
공통된 fill, stroke-width, transform은 g element에 넣고, child가 상속받도록 하면 코드의 중복을 줄일 수 있다.
<svg width="40" height="40" viewBox="0 0 40 40">
<g
fill="transparent"
strokeWidth="20"
transform="rotate(-90) translate(-40)"
>
<circle
r="10"
cx="20"
cy="20"
stroke="tomato"
strokeDasharray="calc(100 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
/>
<circle
r="10"
cx="20"
cy="20"
stroke="pink"
strokeDasharray="calc(80 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
/>
<circle
r="10"
cx="20"
cy="20"
stroke="yellow"
strokeDasharray="calc(50 * calc(2*3.14*10) / 100) calc(2*3.14*10)"
/>
</g>
</svg>