chartjs

[React] Chartjs로 막대그래프 그리기

패키지 설치 npm install chartjs react-chartjs-2 chartjs 뿐만 아니라 react에서 chart를 렌더링하기 위한 react-chartjs-2도 설치해야한다. Chart 그리기 1) 사용할 chart 요소 등록하기 (register) react에서 chartjs를 사용하려면 컴포넌트를 불러오는 것 뿐만 아니라 사용할 컴포넌트들을 register하는 과정이 필요하다. import React from 'react'; import { Bar } from 'react-chartjs-2'; import { Chart as ChartJS, CategoryScale, LinearScale, Title, Tooltip, Legend, BarElement, } from 'chart.js'..

[JS] Chartjs 막대그래프 그리기 (별점 분포 차트)

별점들을 표시하고 최빈값을 다른 색으로 표시하는 차트를 그릴 것이다. 1. 준비물 CDN 방식으로 라이브러리 불러오기 script 부분 body 부분 2. 크키 지정 (반응형) chartjs 옵션을 따로 설정할 필요 없이 차트 canvas를 div로 감싸고, 그 div에 max-width로 크기를 지정하면 된다. .chart-box { margin: auto; max-width: 800px; } #average { margin-top: 30px; text-align: center; } 3. 차트 그리기 const ratings = [ { stars: 1, count: 100 }, { stars: 2, count: 230 }, { stars: 3, count: 700 }, { stars: 4, count:..