코로나 바이러스 확진자 동향 3주간 비교 - 차트 만들기

Photo by CDC on Unsplash

 

1) 공공데이터 오픈API를 신청해서 데이터 얻기 https://jusths.tistory.com/199

2) 데이터를 먹기좋게 요리하기 https://jusths.tistory.com/200 

3) 데이터를 차트로 만들어서 웹서비스 하기 https://jusths.tistory.com/201

4) Heroku 에 올려서 서비스하기 https://jusths.tistory.com/202

 

GitHub: https://github.com/nicewook/corona-visual-server

Heroku app: https://corona-weeks.herokuapp.com/

 

차트 만들기

 

이제 차트를 만들어보자 이용한 패키지는 https://github.com/go-echarts/go-echarts

최종 이미지는 아래와 같다.

 

1) 세 주의 같은 요일별 확진자 수가 나란히 나온다.

2) 숫자가 바의 위에 표시된다.

3) 시작하는 요일은 요청한 날에 맞춰서 바뀐다

 

표시를 원치 않는 week는 legend를 toggle 하여 보이지 않게 할 수 있다.

 

Bar와 관련한 예제링크는 아래와 같다. 하나씩 테스트 해보면 쉽게 익힐 수 있다.

예제 링크: https://github.com/go-echarts/examples/blob/master/examples/bar.go

 

핸들러 함수내에 있는 차트를 만드는 코드는 단순하다

1) 먼저 bar 인스턴스를 하나 만들고

2) Title, Subtitle, 그리고 위치에 대한 정보를 global option 으로 설정한다

3) Legend 에 대한 global option도 설정한다

 

그리고 나선 값을 넣어준다.

1) AddSeries() 를 이용해 3주 각각에 대한 Series를 추가해준다.

2) SetXAxis()는 요일을 표시해준다.

3) 마지막으로 각각의 바 위에 값을 적어주도록 opts.Label을 설정해준다.

 

이렇게 생성된 bar 를 bar.Render() 함수로 w에 써주면 끝이다.

 

getWeelyAxis()

getWeelyAxis()는 시작할 요일정보를 알아내는 함수이다.

generateWeeklyBarItems()

generateWeeklyBarItems()는 우리가 생성해낸 data 를 기반으로 bar에서 쓸 수 있는 슬라이스를 리턴하게 해주는 함수이다.

 

이게 차트의 전부이다. 더욱 이쁘고 편리하게 만들 수 있겠지만 이것만으로도 원하는 목표는 달성하였다.

다음 포스팅에는 마지막으로 이를 heroku에 올려서 서비스 할 수 있도록 만들어보겠다.