[javascript/js] 컴퓨터로 막대그래프를 그려보자

컴퓨터로 막대그래프를 그려보자

javascript를 이용하여 막대그래프를 구현해보았다. 자료는 통계청 대한민국 광역시 인구 수 자료를 활용하였으며, 표로 나타내면 다음과 같다.

2023년 대한민국 5개 특별시/광역시 인구 수(단위: 명)

서울	부산	대구	인천	광주
9,409,466	3,302,740	2,378,464	2,985,152	1,423,810

우리나라에는 1개의 특별시와 5개의 광역시가 있으나, 우선 서울/부산/대구/인천/광주 5개의 지역만을 구현해보았다.

마우스를 올리면 인구 수를 확인할 수 있도록 만들어보았다.

 

핵심 js/css 요소

1. json 객체 활용 : 그래프로 구현할 자료를 json에 담아 다음과 같이 나타내보았다.

const jsonFile = { seoul: 9409466, busan: 3302740, daegu: 2378464, incheon: 2985152, gwangju: 1423810 }

2. for in문 활용 : key값을 탐색하여 반복할 수 있는 for in문을 활용하여 인구 최댓값을 구해보았다.

3. clientRect 활용 : 객체의 좌표를 구할 수 있는 clientRect를 활용해보았다. 이를 이용해 마우스를 올렸을 때_{onmouseover 이벤트} 막대그래프 좌표를 따 알맞은 위치에 구현할 수 있었다.

const clientRect = selectedData.getBoundingClientRect();

서울

부산

대구

인천

광주

2023년 대한민국 광역시 인구 수(단위: 명)

 

느낀 점

getBoundingClientRect() 메서드를 잘 활용해보아야겠다. 위치 값을 쉽게 구할 수 있어 보다 복잡한 요소들을 배치하기 용이할 것으로 기대한다.

실제 막대그래프는 가로축, 세로축이 무엇을 나타내는지 구현해야한다. 아울러 100만, 200만, 300만..., 900만으로 세로축 단위를 미구현한 점이 아쉽다.