728x90 [AWS]/ChartJs2 react-chartjs-2를 이용한 동적 그래프구현하기!! 한이음 프로젝트를 진행하면서 온도관련 그래프를 구현해야 했다.처음에는 nivo라이브러리를 사용했는데, 구현하려던게 처음에는 주간 온도 그래프를 그리고 특정 날짜의 그래프 위를 클릭하면 일일 온도 그래프를 띄워 주는 거였다.찾아보니 chart.js가 동적으로 더 좋다고 한걸 봐서 chart.js로 바꾸게 되었다.react-chartjs-2chartjs 와 react-chartjs-2 공식 사이트가 따로있는데 react-chartjs-2가 타입스크립트로 더 잘나와있어서 여길 보고 참고헀다.chartjsreact-chartjs-2chart 종류에는 파이차트, 라인차트, 도넛차트 등등의 차트를 이런 식으로 간편하게 불러올 수 있다.그중에서 내가 사용한 차트는 Line 차트이다.내가 사용했던 코드를 바탕으로 간.. 2025. 1. 7. Chart.js를 사용한 차트 만들기!! Chart.js 라이브러리를 사용하여 차트 만들기 입니다. 차트를 만드는 라이브러리나 API는 그 종류가 굉장히 많이 있지만 Chart.js는 자바 스크립트를 사용하여 간단히 차트를 만들수 있는 라이브러리 입니다. 여행 방법은 아래와 같습니다. 1. CDN 형태로 라이브러리 가져오기 라이브러리를 다운로드 받아 프로젝트내에 포함시킬 수 도 있습니다. line type 1 특별한 이유는 없지만 를 사용하여 차트의 라벩값을 자바스크립트에서 사용하였고, 데이터는 request 영역에 담아 사용토록 하였습니다. 또는 자바스크립트 함수 파라메터로 전달해도 상관없을 것입니다. 3. 대표적인 차트 유형 line, bar, doughnut, polarArea, radar 는 같은 데이터셋을 사용하여 차트를 만.. 2025. 1. 7. 이전 1 다음 728x90
