Chart.js 및 react-wordcloud 관련 사용법

현재 관리자 대시보드 페이지에서는 Chart.js 및 react-wordcloud 등의 라이브러리를 통해서 다양한 차트들이 구현되어 있습니다.

원형 차트, 블록 차트, 선형 차트 등 다양한 차트들은 데이터만 올바르게 주입해준다면, Chart.js 라이브러리를 통해 간편하게 구현 가능합니다.

Chart.js

예시 이미지: 선형 차트

버전 기준: 3.9.1

설치법

npm install chart.js
yarn add chart.js

등 명령어로 chart.js 라이브러리를 설치해주시면 됩니다.

사용법

import { Chart } from 'react-chartjs-2';
// import 한 <Chart> 컴포넌트에 다양한 옵션을 설정하면 됩니다.
// ...
export default function SomeChart() {
   return <Chart
      type="bar"
      data={data}
      options={{...}}
   />
}

type에 구현하길 원하는 차트의 종류를 입력해주면 됩니다. (ex) "bar", "pie", "line"...

data: {
   datasets: [
      {
         data: [10, 10],
      }
   ],
   labels: ["a" , "b"]
}

data는 일반적으로 아래와 가은 형태를 지닌채로 넣어주면 됩니다. ({datasets: {data: number[]}[], labels: string[] })

options={{
   responsive: true,
   plugins: {
      legend: {
         position: "bottom",
      },
      tooltip: {
         callbacks: {
            label: function (context) {
               // ...
               // ...
               return label;
            },
         },
      },
   },
}}

options 에서는 다양한 차트 관련 설정이 가능합니다.

예를 들어 responsive가 true면 감싸고 있는 container 컴포넌트의 크기에 맞춰서 차트의 사이즈가 변화됩니다. legend에는 차트의 목록을 보여줄 위치, tooltip에서는 마우스 커서가 hover 될 때 보여줄 tooltip 관련 설정 등이 가능합니다.

파이(원형) 차트 주의 사항

원형 차트의 경우 (차트의 type="pie") 주입되는 데이터에 수치가 [0,0] 과 같이 들어갈 경우 원형차트가 아예 구현안되는 현상이 있습니다.

때문에, [0,0] 과 같이 데이터가 들어올 경우에 대해 분기처리하여 알림 문구 등을 구현해 주는게 좋습니다.

Chart.js docs

react-wordcloud

react-wordcloud 라이브러리는 리액트 환경에서 아래와 같이 키워드 데이터를 시각화해주는데 유용합니다.

버전 기준: 1.2.7

설치법

npm install react-wordcloud
yarn add react-wordcloud

등 명령어로 react-wordcloud 라이브러리를 설치해주시면 됩니다.

사용법

사용 방법은 아래와 같이 import한 <ReactWordCloud> 컴포넌트에 데이터를 주입하고, 다양한 옵션을 설정하면 됩니다. words props에 주입되는 데이터는 {text: string, value: number}[]와 같은 형식을 지니면 됩니다.

import ReactWordCloud from "react-wordcloud";
// ...
     <ReactWordCloud
       words={data}
       options={{
         deterministic: true, // 단어들을 무작위로 배치/회전 하지 않고, 한가지 방법으로만 랜더링할지에 대한 여부
         scale: "log", // 단어 간격 및 배치 방식 (ex "linear" , "sqrt" 등 옵션이 존재)
         rotations: 0, // 회전 각도의 정도
         padding: 5, // 글자간 간격 조절
       }}
     />

위에 서술된 옵션외에 fontFamily과 같이 폰트 관련 옵션이나 colors와 같은 글자 색 관련 옵션 등 다양한 옵션을 제공합니다.

fontSizes 옵션 주의사항

현재 옵션 중 최소 폰트사이즈와 최대 폰트사이즈를 정하는 fontSizes 옵션을 설정하게 될 경우, 페이지 렌더링이 급격하게 느려지는 현상이 존재합니다. (참조)

만약 폰트 사이즈를 동반하여 전체적인 컴포넌트 사이즈를 키우고 싶다면

transform: scale(1.1)

과 같은 css 스타일을 통해서 전체적인 컴포넌트 사이즈를 키우는 방법이 있습니다.

npm 참조

사용법 관련