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

[tnghgks]

구현 기능

시계열 차트 만들기

• [x] 주어진 JSON 데이터의 key값(시간)을 기반으로 시계열 차트를 만들어주세요
• [x] 하나의 차트안에 Area 형태의 그래프와 Bar 형태의 그래프가 모두 존재하는 복합 그래프로 만들어주세요
• [x] Area 그래프의 기준값은 value_area 값을 이용해주세요
• [x] Bar 그래프의 기준값은 value_bar 값을 이용해주세요

• [x] 차트의 Y축에 대략적인 수치를 표현해주세요(예시 이미지 참고)

  호버 기능 구현

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

  라이브러리 선택 이유

1. Nivo

장점

• 매우 다양한 종류의 차트와 그래프를 제공
• 매우 유연하며 커스터마이징 가능한 차트를 제공
• 반응형으로 디자인 되어 있어 모바일 기기에서도 정상적인 작동

단점

• mixed 차트가 없음(사용하려면 d3 문법으로 튜닝해야함)
• 사용법이 다소 복잡
• 최근에 업데이트된 기능이 많지 않음

2. Recharts (선택)

장점

• React.js를 사용하므로 React 앱에서 쉽게 사용 가능 ( Recharts 라이브러리만 설치하면됨)
• 커스터마이징이 쉬움
• 반응형으로 디자인 되어 있어 모바일 기기에서도 잘 작동함
• 직관적인 컴포넌트

단점

• 문서화가 부족합니다. 세부 속성들을 어떻게 사용하는지 예시가 부족함

3. Apexcharts

장점

• 다양한 종류의 차트와 그래프를 제공합니다.
• 커스터마이징이 쉬움
• 반응형으로 디자인 되어 있어 모바일 기기에서도 잘 작동함
• UI가 모던함

단점

• React.js를 직접 지원하지 않으므로 라이브러리 설치 필요
• React 문서가 class 문법 기준으로 작성되어있음

4. Chartjs

장점

• 다양한 종류의 차트와 그래프를 제공함
• 매우 유연하며 커스터마이징 가능한 차트를 제공함
• 문서화가 잘 되어 있어 사용하기 쉬움

단점

• React.js를 직접 지원하지 않으므로 라이브러리 설치 필요

5. D3.js

장점

• 매우 다양한 종류의 차트와 그래프를 제공함
• 매우 유연하며 커스터마이징 가능한 차트를 제공함
• 모든 종류의 데이터 시각화를 할 수 있음
• 자유도가 높아서 고급 시각화에 매우 적합함

단점

• 사용하기가 어려움.
• D3.js는 순수 자바스크립트 라이브러리이기 때문에, React와 함께 사용할 때 추가 작업이 필요

참고사항

• Recharts 선택한 이유 : 낮은 의존성, 직관적인 컴포넌트, 쉬운 커스터마이징으로 인한 선택
• Chart 컴포넌트 Props로 데이터를 받을 수 있게 분리함
• CustomTooltip으로 차트 마우스 호버 시 툴립 출력

Sample