개발/웹개발

다각형 차트를 수학과 JS로 만들어보자..

차가운콩 2024. 4. 17. 09:20

 

바닐라 JS로 다각형 차트 만들기 

 

 

해당 과제는 JSON 데이터를 이용하여서 다각형 방사형 차트를 만드는 것이다.

 

해당 다각형 차트를 만들기 위해선 라디안, 삼각함수에 대해서 알아야 한다.

 

꼭짓점에 마우스를 호버 시키면 가리키는 명소 이름과 그 방문자 수가 뜬다

꼭짓점 옆에 있는 명소 이름을 클릭하면 차트에서 삭제되고 애니메이션 효과가 나타나며
이전 도형보다 각이 하나 줄어든 모양으로 나타난다

 

범례에는 어떤 명소가 차트에 유효한지 구분하여 디자인 하였고 범례에서 
비활성화되어 있는 명소 이름을 클릭하면 다시 차트에 해당 명소가 추가된다