그래프 두개 만들기
-
SVG 왕초보와 함께하는 그래프/차트 만들기 - 2. 직선, 곡선 그래프토막글 2021. 8. 2. 13:38
안녕하세요 :) 이번엔 SVG로 곡선 그래프를 만들어본 경험을 공유해보려 합니다. 앞서 SVG 왕초보와 함께하는 그래프/차트 만들기 - 1. 도넛 차트 를 읽고 오신 분이 아니라면, 해당 글에서 설명했던 내용들이 비슷하게 다시 나오기 때문에 도넛 차트를 구현하실 분이 아니더라도 읽고 와주시면 더 이해가 빠를거예요! 다만 d attribute의 A command는 안 쓸거니 스킵하셔도 됩니다. (해당 글 2번 섹션에 있음) 이번에도 결과부터 보자면, 왼쪽의 데이터가 오른쪽 차트로 보이게 됩니다. 구현 순서 구현 순서를 요약해 말해보자면 다음과 같습니다. 요번엔 3번이 고비예요 데이터를 그래프 좌표로 변환하기 직선 그래프 그려보기 곡선 그래프를 위한 control point 만들기 (control point..
-
SVG 왕초보와 함께하는 그래프/차트 만들기 - 1. 도넛 차트토막글 2021. 8. 2. 11:10
안녕하세요 :) 오늘은 SVG로 도넛 차트를 만들어본 경험을 공유해보려 합니다. 단지 한, 두 가지 차트를 위해 Chart.js 같은 라이브러리를 사용하는 것은 기술 남용이라고 생각합니다. 이와 비슷한 생각을 가지시고 웹 세계를 떠돌아다니시는 분들이 있다면 나쁘지 않은 자료가 될 것이라 생각합니다 :) 결과부터 보자면, 왼쪽의 데이터가 오른쪽 차트로 보이게 됩니다. 구현 순서 위와 같은 호를 그리기 위한 순서를 요약해 말해보자면 다음과 같습니다. 참고로 말하자면 저는 2번이 고비였습니다. 😅 SVG viewBox 설정 각 영역을 호로 그려보기 호로 그린 영역을 fill : none으로 바꾸고 stroke 를 사용해 그리기 각 영역마다 animation 주기 viewBox 개선 및 hover 시 scale..