๋ฐ˜์‘ํ˜•

๋ฉ€ํ‹ฐ์ถ• 1

[React] react + typescript + Chart.js Multi-Axis ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•

Intro ์•ˆ๋…•ํ•˜์„ธ์š”. ์•ž์„  ํฌ์ŠคํŒ…์—์„œ Multi type chart๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ดค๋Š”๋ฐ์š”, ์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” Chart.js์—์„œ Multi-Axis ๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. Multi-Axis ์€ ๋ฐ์ดํ„ฐ์˜ ๋‹จ์œ„ ์ฐจ์ด๊ฐ€ ์ปค์„œ ํ•œ๊บผ๋ฒˆ์— ํ‘œํ˜„ํ•  ๋•Œ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค. How to do ์ œ ๊ฒฝ์šฐ series1, series2 ๋‘ ๋ฐ์ดํ„ฐ์— ์ƒ์‘๋˜๋Š” y์ถ•์„ ์˜ค๋ฅธ์ชฝ๊ณผ ์™ผ์ชฝ์— ํ‘œ์‹œํ•˜๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ๊ฐ ์‚ฌ์šฉํ•˜๊ณ ์ž ํ•˜๋Š” ์ถ•์ด ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— yAxisID ์†์„ฑ์„ ํ™œ์šฉํ•˜์—ฌ a, b ๋‘๊ฐœ๋ฅผ ์ง€์ •ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ดํ›„ options์—์„œ ํ•ด๋‹น yAxisID๋ฅผ ์‚ฌ์šฉํ•ด position์„ right, left๋กœ ์„ค์ •ํ•ด์คฌ์Šต๋‹ˆ๋‹ค. const series1: number[] = [] const series2: number[]..

Framework/React 2023.07.25
๋ฐ˜์‘ํ˜•