티스토리 뷰

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 올려서 서비스 있도록 만들어보겠다.

 

반응형
반응형
잡학툰 뱃지
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함