라이브러리 없이 도넛차트와 라인 차트 만들어보기 : (with React)

차트는 Canvas, DIV(html, css), SVG 등 크게 3가지 방법으로 만들 수 있다.

Canvas

비트맵 영역을 활용
즉, 자바스크립트 코드로 화면 위에 픽셀을 그려 넣는 방법
👎) 픽셀을 다루게 되어 도형의 크기에 따라 해상도를 따로 고려해야 하는 단점이 있다.

DIV를 이용한 방법

DIV로 도넛 차트를 그리는 경우, 원을 나타내기 위해 radius를 조절하여 그리게 됨
👎) 이 방식은 화면의 크기에 상관없이 도형의 크기가 고정되어 있어 반응형에 취약하다는 단점이 있다.

SVG

벡터 형식으로 화면의 크기에 따라 그 크기가 유동적으로 변하는 특징이 있음
👍) SVG 태그 중 하나인 <circle>stroke, stroke-width 등의 속성으로 쉽게 도형을 표현할 수 있다는 장점이 있음!

나는 여기서 반응형에 쉽게 구현할 수 있고, 자료가 많은 svg를 선택해서 개발을 했었다!

도넛 차트🍩

stroke-dasharray

도형의 둘레의 dashgap을 정의하는 패턴으로 도형의 둘레의 stroke의 길이와 각각의 stroke 사이의 공백의 패턴을 정의한다!