Front-End/SVG2 [SVG] SVG를 이용한 gauge 차트 만들기 안녕하세요 :) 오늘은 게이지 차트를 아래와 같이 만들어 보았습니다. 고등학교 때 배운 삼각함수 개념정도만 이해하고 있으면 차트를 만드는데 큰 어려움은 없습니다. 1. 삼각함수를 이용해 좌표값 구하기 게이지 차트를 위해 가장 중요한 좌표는 게이지가 끝나는 지점 (sx, sy)입니다. (s는 starting의 약어인데 적절하지 않은 변수명이네요 ㅠㅠ) 코사인 세타에 반지름을 곱하면 cx에서 sx까지의 거리값이 나옵니다. 여기에다 중앙값인 cx값을 더하면 sx값이 구해지게 됩니다. y좌표도 마찬가지 방법으로 구했습니다. 2. SVG 태그를 이용해 호 그리기 이부분이 살짝 어려운데요, 공식문서를 찾아보면 Arc를 그리는 방법에 대해 설명이 되어 있습니다. SVG에서 Arc를 그리기 위해서는 꽤나많은 파라미터를.. 2023. 8. 1. [SVG] Catmull-Rom 알고리즘으로 svg 차트 만들기 안녕하세요 :) 오늘은 아래 사진과 같은 ui 작업 도중에 차트가 있는 것을 확인했습니다. 주식 관련 어플에서 흔히 볼 수 있는 차트인데요, 이부분을 구현하는데 약간의 고민이 있었습니다. 어플의 다른 차트 부분은 ui 라이브러리를 이용하고 있는데, 이 부분을 ui 라이브러리를 사용하는 게 맞는지 고민되었습니다. 왜냐하면 ui 라이브러리를 이용하면 아래와 같은 단점이 있기 때문입니다. 렌더링 부담 비대한 로딩 용량 디자인 유연성 하락 라이브러리 비교 및 테스팅 위의 ui는 목록 형식으로 다량의 ui가 반복해서 호출될건데 되도록이면 가벼운 ui가 좋겠다고 생각되어 svg를 이용해 직접 만들기로 했습니다. 차트를 만드는 방법은 흔히 svg와 canvas를 이용하는 방법이 있는데요, 여기서 svg를 이용한 이유.. 2023. 7. 13. 이전 1 다음
