logo

[React] Chart.js 를 통해 차트 그리기

language-logoReactJS

• 리액트를 처음 사용하여 삼성전자 주식 시세를 실시간으로 확인할 수 있는 웹을 개발하였으며, 차트 표시를 위해 Chart.js 라이브러리를 활용하였다.
• Chart.js를 설치하고, 리액트 컴포넌트에서 차트를 그리기 위해 필요한 설정과 데이터를 구성하여 일별 주가, 시가 및 거래량을 시각화하였다.
• `DailyStockPage` 컴포넌트는 `useQuery`를 사용하여 주식 데이터를 가져오고, 로딩 중이거나 오류가 발생한 경우 적절한 메시지를 표시하며, 데이터를 성공적으로 가져오면 `DailyStockChart` 컴포넌트를 렌더링하여 일별 삼성전자 주식 시세 정보를 보여줍니다.
• `DailyStockChart` 컴포넌트는 Chart.js를 사용하여 차트를 생성하며, 데이터셋과 옵션을 설정하여 날짜를 x축 레이블로 사용하고, 종가 데이터를 시각화하며, 차트의 스타일과 y축을 구성합니다.

thumbnail
북마크
공유하기
신고하기
4분 분량
조회수 367
profile-image쭌2
6달 전
Copyright © 2025. Codenary All Rights Reserved.