
[React] chartjs / chart.js / react ์ฐจํธ / react chart
๐จ๐ป๊ฐ๋ฐ/โ๏ธReact
2021. 8. 19. 13:29
Chart.js ์ด๋ฒ์ ์ ๊ท ํ๋ก์ ํธ๋ฅผ ์งํํ๊ฒ๋์ด ์์์ ๋ฐ์๋ค. ๋งค์ถ์ด๋ ํํฉ ๋ฑ ์ฃผ๋ก ๋์๋ณด๋์์ ์์ฃผ ์ฐ์ด๋ ์ฐจํธ๋ฅผ ์ฌ์ฉ ํด๋ณด๋ ค๊ณ ํ๋ค. ์! ์ฌ๊ธฐ์์๋ ํจ์ํ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๊ณ ์๋ค : ) Install $ npm install chart.js --save Import import Chart from 'chart.js/auto'; How to Use function ??? () { const canvasDom = useRef(null); // Dependency array ์ props ์ถ๊ฐํ๊ณ return์ chart.destory() ์ถ๊ฐ ์์ useEffect(() => { const ctx = canvasDom.current.getContext("2d"); new Chart(ctx, {..