[Noeyso] 시계열 차트, 호버기능 구현

[Noeyso]

구현 기능

📊 시계열 차트 만들기

• [x] 주어진 JSON 데이터의 key값(시간)을 기반으로 시계열 차트를 만들어주세요
• [x] 하나의 차트안에 Area 형태의 그래프와 Bar 형태의 그래프가 모두 존재하는 복합 그래프로 만들어주세요
• [x] Area 그래프의 기준값은 value_area 값을 이용해주세요
• [x] Bar 그래프의 기준값은 value_bar 값을 이용해주세요
• [x] 차트의 Y축에 대략적인 수치를 표현해주세요(예시 이미지 참고)

🖱 호버 기능 구현

• [x] 특정 데이터 구역에 마우스 호버시 id, value_area, value_bar 데이터를 툴팁 형태로 제공해주세요

참고 사항

사용 라이브러리 : chart.js , react-chartjs-2

react-chartjs-2는 chart.js를 리액트에서 쉽게 사용할 수 있게 도와주는 라이브러리입니다.

사용 이유

• chart.js 라이브러리의 높은 다운로드 수
• 다양한 옵션을 제공해주어 커스터마이징에 용이하다. (확장성이 좋다.)
• 혼합 차트를 구현할 수 있고 툴팁을 설정할 수 있다.

SAMPLE

[bokjunwoo]

chart.js 라이브러리 사용이 어려워서 다른 라이브러리를 사용했는데 많은 부분을 배웠습니다! 고생하셨습니다