Web App Project

nivo를 통한 chart 내용 보강

하얀성 2024. 5. 19. 14:58

기존 차트를 지난번에 사용해본 nivo 차트를 통해서 바꾸기로 했다.

https://elecch.tistory.com/600

 

nivo를 통한 Graph chart 생성하기[자신감up 실습13]

렌더링 모습 새로 설치해야 할게 많다. 그리고 스타일링을 좀 해줘야 한다. 그것말곤 data든 코드든 nivo 페이지에 다 나와있어서 설명대로 따라하면 출력이 손쉽게 된다.

elecch.tistory.com

 

기존 차트 내용


바뀐 차트 내용

 

1. 기존 1개월만 있던 차트에서 당일 작성날짜를 기준으로 1개월과 6개월 간의 내역을 표시하도록 했다.

2. line chart, pie chart 두 가지 차트를 활용하였다.


pie 차트는 6개월 간의 각 수입, 지출의 비중을 눈으로 파악할 수 있도록 하였다.