[2023.04.24 개발 일지] Chart.js 사용해 보기

728x90

평소 공부한 내용은 정리를 하고 있는데 개발했던 과정과 오류, 개발하면서 들었던 생각들이 많았는데 기록없이 넘어가다보니 아깝다는 생각이 들어서 개발일지를 써야겠다는 생각이 들었다.

리액트 연습을 위해서 포켓몬 API를 활용하여 포켓몬 도감을 만들고 있다.

포켓몬 개체수가 1000개가 넘고 포켓몬 뿐만아니라 아이템이나 스킬과 같은 정보들도 제공되고 있어 데이터 규모가 작지 않은편이기때문에 연습하기에 좋은 것 같다.

기본적으로 포켓몬 리스트와 포켓몬 상세페이지만으로는 허전한 느낌이라서 다른 기술도 사용해보려고 한다.

가장 먼저 생각났던 것이 포켓몬 스탯정보를 단순히 텍스트로만 출력하지 않고 그래프로 표현하고 싶었다.

채용공고에서도 D3.js나 Chart.js가 종종 보이는 것을 보고 해보고 싶었는데 포켓몬 스탯을 보고 적용하기 좋아 보였다.

포켓몬 사진과 타입이 있어서 레이아웃만 수정해서 텍스트만으로 출력해도 나쁘지는 않을 것 같지만 허전한 느낌은 지울 수 없다.

먼저 D3.js를 적용하기 위해서 찾아보니 SVG를 활용하여 차트를 그려주기 때문에 해상도의 깨짐이 없고 커스터마이징 하기에 좋다고 한다.

하나 하나 직접 다루어야 할 내용이 많아 보였고 러닝커브가 다소 있다고 해서 Chart.js를 알아보았다.

Chart.js는 Canvas 기반으로 차트를 그리며 react-chartjs-2 라이브러리를 사용하면 차트를 컴포넌트 처럼 쉽게 사용할 수 있다.

이번에는 단순히 차트를 그리기만 하면 되기때문에 맛보기로 chart.js를 사용했다.

보여줄 스탯은 6가지이고 스탯을 보여주기에는 역시 육각형 형태의 그래프가 좋다고 생각했는데 마침 react-chartjs-2 Radar Chart를 제공하고 있었다.

사용 방법은 정말로 간단했는데 기본적인 Chart와 관련된 Legend, Tooltip과 같은 기능들을 import 하여 쉽게 사용할 수 있다.

const Statdata = {

labels: stats.labels,

datasets: [

{

label: "label",

data: stats.values,

backgroundColor: "rgba(255, 99, 132, 0.2)",

borderColor: "rgba(255, 99, 132, 1)",

borderWidth: 1,

};

단순히 API로 부터 받아온 스탯 데이터를 datasets에 data속성에 넘겨주고 label, 선 색, 배경색 등을 설정하고 차트 컴포넌트에 넘겨주면 끝이다.

훨씬 보기 좋고 포켓몬 별로 어떤 특성이 강점인지 한눈에 보기 좋다.

앞으로 이외의 차트도 다뤄보고 싶어서 여러 데이터를 다룰 수 있는 프로젝트에서 적용해보면 좋을 것 같다.

728x90