Chart.js 및 react-wordcloud 관련 사용법
Chart.js 및 react-wordcloud 관련 사용법 현재 관리자 대시보드 페이지에서는 Chart.js 및 react-wordcloud 등의 라이브러리를 통해서 다양한 차트들이 구현되어 있습니다. 원형 차트, 블록 차트, 선형 차트 등 다양한 차트들은 데이터만 올바르게 주입해준다면, Chart.js 라이브러리를 통해 간편하게 구현 가능합니다. Chart.js 예시 이미지: 선형 차트 버전 기준: 3.9.1 설치법 등 명령어로 chart.js 라이브러리를 설치해주시면 됩니다. 사용법 type에 구현하길 원하는 차트의 종류를 입력해주면 됩니다. (ex) data는 일반적으로 아래와 가은 형태를 지닌채로 넣어주면 됩니다. options 에서는 다양한 차트 관련 설정이 가능합니다. 예를 들어 responsive가 면 감싸고 있는 container 컴포넌트의 크기에 맞춰서 차트의 사이즈가 변화됩니다. legend에는 차트의 목록을 보여줄 위치, tooltip에서는 마우스 커서가 hover 될 때 보여줄 tooltip 관련 설정 등이 가능합니다. 파이(원형) 차트 주의 사항 원형 차트의 경우 (차트의 ) 주입되는 데이터에 수치가 과 같이 들어갈 경우 원형차트가 아예 구현안되는 현상이 있습니다. 때문에, 과 같이 데이터가 들어올 경우에 대해 분기처리하여 알림 문구 등을 구현해 주는게 좋습니다. react-wordcloud 라이브러리는 리액트 환경에서 아래와 같이 키워드 데이터를 시각화해주는데 유용합니다. 버전 기준: 1.2.7 설치법 등 명령어로 react-wordcloud 라이브러리를 설치해주시면 됩니다. 사용법 사용 방법은 아래와 같이 한 컴포넌트에 데이터를 주입하고, 다양한 옵션을 설정하면 됩니다. props에 주입되는 데이터는 와 같은 형식을 지니면 됩니다. 위에 서술된 옵션외에 과 같이 폰트 관련 옵션이나 와 같은 글자 색 관련 옵션 등 다양한 옵션을 제공합니다. 옵션 주의사항 현재 옵션 중 최소 폰트사이즈와 최대 폰트사이즈를 정하는 옵션을 설정하게 될 경우, 페이지 렌더링이 급격하게 느려지는 현상이 존재합니다. () 만약 폰트 사이즈를 동반하여 전체적인 컴포넌트 사이즈를 키우고 싶다면 과 같은 css 스타일을 통해서 전체적인 컴포넌트 사이즈를 키우는 방법이 있습니다.
a year ago
