svg doughnut chart
-
SVG 왕초보와 함께하는 그래프/차트 만들기 - 1. 도넛 차트토막글 2021. 8. 2. 11:10
안녕하세요 :) 오늘은 SVG로 도넛 차트를 만들어본 경험을 공유해보려 합니다. 단지 한, 두 가지 차트를 위해 Chart.js 같은 라이브러리를 사용하는 것은 기술 남용이라고 생각합니다. 이와 비슷한 생각을 가지시고 웹 세계를 떠돌아다니시는 분들이 있다면 나쁘지 않은 자료가 될 것이라 생각합니다 :) 결과부터 보자면, 왼쪽의 데이터가 오른쪽 차트로 보이게 됩니다. 구현 순서 위와 같은 호를 그리기 위한 순서를 요약해 말해보자면 다음과 같습니다. 참고로 말하자면 저는 2번이 고비였습니다. 😅 SVG viewBox 설정 각 영역을 호로 그려보기 호로 그린 영역을 fill : none으로 바꾸고 stroke 를 사용해 그리기 각 영역마다 animation 주기 viewBox 개선 및 hover 시 scale..